From 8108f904d515ba29d94cb1c027eb4a623adf22d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:32:49 +0300 Subject: [PATCH 01/38] Merge master --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 46d48561e5a..ced95613d72 100755 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "type": "git", "url": "https://github.com/primefaces/primeng.git" }, + "type": "module", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", "@angular-eslint/eslint-plugin": "17.1.1", From 94670b38811d0a9d2c55965363919e4142afc094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denny=20M=C3=BCller?= Date: Tue, 23 Jan 2024 08:16:19 +0100 Subject: [PATCH 02/38] fix: #14606 restricted pointer events more --- src/app/components/calendar/calendar.css | 2 +- src/app/components/calendar/calendar.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/calendar/calendar.css b/src/app/components/calendar/calendar.css index cc1b1887c6c..bb2e30d40a6 100755 --- a/src/app/components/calendar/calendar.css +++ b/src/app/components/calendar/calendar.css @@ -166,7 +166,7 @@ cursor: pointer; } - .p-icon-wrapper { + .p-datepicker-icon { pointer-events: none; } diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index ddca239abed..c29587d417e 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -120,7 +120,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { - + From 5fc6081674fd22c4929e0e3bd61d61c4ce199d3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:32:49 +0300 Subject: [PATCH 03/38] Merge master --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 9012fc60b3a..88719441239 100755 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "type": "git", "url": "https://github.com/primefaces/primeng.git" }, + "type": "module", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", "@angular-eslint/eslint-plugin": "17.1.1", From e9968402d65aadc9f84aed3270186ec295f32e35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denny=20M=C3=BCller?= Date: Thu, 25 Jan 2024 07:57:05 +0100 Subject: [PATCH 04/38] update for show on focus --- src/app/components/calendar/calendar.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index c29587d417e..59457debf98 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -120,7 +120,9 @@ export const CALENDAR_VALUE_ACCESSOR: any = { - + From 3788b9b711205e7274a739be864704cf65e94143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denny=20M=C3=BCller?= Date: Thu, 25 Jan 2024 08:02:27 +0100 Subject: [PATCH 05/38] prettier --- src/app/components/calendar/calendar.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index 59457debf98..374b6fcd3f6 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -120,9 +120,13 @@ export const CALENDAR_VALUE_ACCESSOR: any = { - + From 4bd617d9270fa4cbcf1d2f1452d53b15185953c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:25:23 +0300 Subject: [PATCH 06/38] Fixed #14542 - Calendar | Validation is triggered before calendar is even touched --- src/app/components/calendar/calendar.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index ddca239abed..83426ba574e 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -1576,6 +1576,9 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { } } } + else if (this.dataType === 'string') { + formattedValue = date; + } return formattedValue; } From d5eaae02f2b006883404eb778f31cd6c8240b9f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 25 Jan 2024 13:36:56 +0300 Subject: [PATCH 07/38] Fixed #14556 - Dropdown | Unable to type in editable Dropdowns when filtering options onChange and current value is an option --- src/app/components/dropdown/dropdown.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 8ccd5efece9..45b596f6163 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -1211,7 +1211,9 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.onModelChange(value); this.updateModel(value, event); - this.onChange.emit({ originalEvent: event, value: value }); + setTimeout(() => { + this.onChange.emit({ originalEvent: event, value: value }); + }); !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show(); } From d273bfef8bc933dcb683d04caac28fd2dc2cc561 Mon Sep 17 00:00:00 2001 From: Tim Blischke Date: Thu, 25 Jan 2024 14:14:12 +0100 Subject: [PATCH 08/38] fix(#14630): emit blur after input value validation --- src/app/components/inputnumber/inputnumber.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts index 5238e77fe08..df35268c29b 100644 --- a/src/app/components/inputnumber/inputnumber.ts +++ b/src/app/components/inputnumber/inputnumber.ts @@ -1364,12 +1364,10 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control this.focused = false; let newValue = this.validateValue(this.parseValue(this.input.nativeElement.value)); - - this.onBlur.emit(event); - this.input.nativeElement.value = this.formatValue(newValue); this.input.nativeElement.setAttribute('aria-valuenow', newValue); this.updateModel(event, newValue); + this.onBlur.emit(event); } formattedValue() { From 74a1c2da60f08b50f780942eac690baee9083f87 Mon Sep 17 00:00:00 2001 From: Tyler Smith Date: Sat, 27 Jan 2024 10:16:18 -0500 Subject: [PATCH 09/38] Only show selectedItemTemplate when selectedOption is truthy --- src/app/components/dropdown/dropdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index c1bd64f3bf7..ff01d62dfb2 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -149,7 +149,7 @@ export class DropdownItem { [attr.required]="required" > {{ label() === 'p-emptylabel' ? ' ' : label() }} - + {{ label() === 'p-emptylabel' ? ' ' : placeholder }} From e9277aed8c1b3f268586dddba3d46e9dcf47f0b0 Mon Sep 17 00:00:00 2001 From: Tyler Smith Date: Sat, 27 Jan 2024 10:17:04 -0500 Subject: [PATCH 10/38] Make sure to access modelValue signal as function call inside of the template --- src/app/components/dropdown/dropdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index ff01d62dfb2..c5755ccf9d7 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -151,7 +151,7 @@ export class DropdownItem { {{ label() === 'p-emptylabel' ? ' ' : label() }} - {{ label() === 'p-emptylabel' ? ' ' : placeholder }} + {{ label() === 'p-emptylabel' ? ' ' : placeholder }} Date: Tue, 30 Jan 2024 11:06:28 +0300 Subject: [PATCH 11/38] Fixed #14595 - Autocomplete | maxlength doesn't work anymore --- src/app/components/autocomplete/autocomplete.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 88f75376726..28c7e96b392 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -1061,7 +1061,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr clearTimeout(this.searchTimeout); } - let query = event.target.value; + let query = event.target.value.split('').slice(0, this.maxlength).join(''); if (!this.multiple && !this.forceSelection) { this.updateModel(query); @@ -1622,3 +1622,4 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr declarations: [AutoComplete] }) export class AutoCompleteModule {} + From 841f889339499947cc7a96effaa2b610fc32ed04 Mon Sep 17 00:00:00 2001 From: joseph rosenthal Date: Tue, 30 Jan 2024 06:40:55 -0500 Subject: [PATCH 12/38] fixes logic for selectedOption fixes logic for selectedOption 1) fixes logic for selectedOption 2) uses selectedOption for computing label -- note: issue with virtual scrolling with lazy loading (PrimeNG Demo) as a result keeping original logic for computing label when virtual load (no harm) --- src/app/components/dropdown/dropdown.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index c1bd64f3bf7..6bcaa693e30 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -924,8 +924,12 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV }); label = computed(() => { - const selectedOptionIndex = this.findSelectedOptionIndex(); - return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel'; + // because of timining issues with virtual scroll lazy load PrimeNG demo, keep original logic for virtual scroll + if (this.virtualScroll) { + const selectedOptionIndex = this.findSelectedOptionIndex(); + return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel'; + } + return this.modelValue() ? this.getOptionLabel(this.selectedOption) : this.placeholder || 'p-emptylabel'; }); selectedOption: any; @@ -938,8 +942,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const visibleOptions = this.visibleOptions(); if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) { - this.selectedOption = visibleOptions[this.findSelectedOptionIndex()]; - this.cd.markForCheck(); + const selectedOptionIndex = this.findSelectedOptionIndex(); + if (selectedOptionIndex !== -1 || !modelValue || this.editable) { + this.selectedOption = visibleOptions[selectedOptionIndex]; + this.cd.markForCheck(); + } } if (modelValue !== undefined && this.editable) { From 618cf726d8deda5a5474cdb5cf0235a33d12ae5b Mon Sep 17 00:00:00 2001 From: Taneli Tuomola Date: Tue, 30 Jan 2024 15:07:51 +0200 Subject: [PATCH 13/38] fix #14608 p-ColumnFilter aria-label --- src/app/components/api/translationkeys.ts | 4 ++-- src/app/components/table/table.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/api/translationkeys.ts b/src/app/components/api/translationkeys.ts index 2c93a0ea02e..ca48602cfa6 100644 --- a/src/app/components/api/translationkeys.ts +++ b/src/app/components/api/translationkeys.ts @@ -41,7 +41,7 @@ export class TranslationKeys { public static readonly PASSWORD_PROMPT = 'passwordPrompt'; public static readonly EMPTY_MESSAGE = 'emptyMessage'; public static readonly EMPTY_FILTER_MESSAGE = 'emptyFilterMessage'; - public static readonly SHOW_FILTER_MENU = 'Show Filter Menu'; - public static readonly HIDE_FILTER_MENU = 'Hide Filter Menu'; + public static readonly SHOW_FILTER_MENU = 'showFilterMenu'; + public static readonly HIDE_FILTER_MENU = 'hideFilterMenu'; public static readonly SELECTION_MESSAGE = '{0} items selected'; } diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index a62e121015a..b8ca42d36b5 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -4945,7 +4945,7 @@ export class ReorderableRow implements AfterViewInit { type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" - [attr.aria-label]="showMenuButtonLabel" + [attr.aria-label]="filterMenuButtonAriaLabel" [attr.aria-controls]="overlayId" [attr.aria-expanded]="overlayVisible" [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }" @@ -5277,7 +5277,7 @@ export class ColumnFilter implements AfterContentInit { } get filterMenuButtonAriaLabel() { - return this.config.translation ? (this.overlayVisible ? this.config.translation.aria.showFilterMenu : this.config.translation.aria.hideFilterMenu) : undefined; + return this.config.translation ? (this.overlayVisible ? this.config.translation.aria.hideFilterMenu : this.config.translation.aria.showFilterMenu) : undefined; } get removeRuleButtonAriaLabel() { From feb4967c8862925f3b008bac7a44802d59a4942a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 31 Jan 2024 10:38:44 +0300 Subject: [PATCH 14/38] Fixed #14667 - Table | Responsive Stack and add [scrollable]=true not working --- src/app/components/table/table.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 1971f140193..d59716b3d7e 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -706,7 +706,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * The breakpoint to define the maximum width boundary when using stack responsive layout. * @group Props */ - @Input() breakpoint: string = '960px'; + @Input() breakpoint: string = '640px'; /** * Locale to be used in paginator formatting. * @group Props @@ -1167,7 +1167,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } } - if (this.responsiveLayout === 'stack' && !this.scrollable) { + if (this.responsiveLayout === 'stack') { this.createResponsiveStyle(); } From 4fb0b6f3ffb9f241723214765ee2765bf4c8ce3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 31 Jan 2024 13:31:06 +0300 Subject: [PATCH 15/38] Fixed #14634 - Table | Built-in Ctrl+A errors when rows parameter is defined --- src/app/components/table/table.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 1971f140193..54f43a7da2e 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -3576,7 +3576,7 @@ export class SelectableRow implements OnInit, OnDestroy { default: if (event.code === 'KeyA' && (event.metaKey || event.ctrlKey)) { - const data = this.dt.dataToRender(this.dt.rows); + const data = this.dt.dataToRender(this.dt.processedData); this.dt.selection = [...data]; this.dt.selectRange(event, data.length - 1); From de951ca1a8be00272f1e22c90039e47954a4a987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9meth=20Tam=C3=A1s?= <17056056+tamas-nemeth@users.noreply.github.com> Date: Wed, 31 Jan 2024 11:49:04 +0000 Subject: [PATCH 16/38] fix(table): paginator missing p-paginator-bottom class --- .../components/paginator/paginator.spec.ts | 18 ++++++---- src/app/components/table/table.spec.ts | 36 ++++++++++++++++--- src/app/components/table/table.ts | 10 +++--- 3 files changed, 50 insertions(+), 14 deletions(-) diff --git a/src/app/components/paginator/paginator.spec.ts b/src/app/components/paginator/paginator.spec.ts index 2d1844c00db..5fd59a13c39 100755 --- a/src/app/components/paginator/paginator.spec.ts +++ b/src/app/components/paginator/paginator.spec.ts @@ -27,14 +27,20 @@ describe('Paginator', () => { expect(paginatorEl).toBeTruthy(); }); - it('should change style and styleClass', () => { - paginator.style = { height: '250px' }; - paginator.styleClass = 'Primeng ROCKS!'; + it('should apply style', () => { + fixture.componentRef.setInput('style', { height: '250px' }); fixture.detectChanges(); - const paginatorEl = fixture.debugElement.query(By.css('.p-paginator')); - expect(paginatorEl.nativeElement.className).toContain('Primeng ROCKS!'); - expect(paginatorEl.nativeElement.style.height).toEqual('250px'); + const paginatorElement = fixture.debugElement.query(By.css('.p-paginator')); + expect(paginatorElement?.nativeElement?.style?.height).toEqual('250px'); + }); + + it('should apply styleClass', () => { + fixture.componentRef.setInput('styleClass', 'p-paginator-bottom'); + fixture.detectChanges(); + + const paginatorElement = fixture.debugElement.query(By.css('.p-paginator')); + expect(paginatorElement?.nativeElement).toHaveClass('p-paginator-bottom'); }); it('should use alwaysShow false', () => { diff --git a/src/app/components/table/table.spec.ts b/src/app/components/table/table.spec.ts index 5c1d8735559..01d55faed61 100755 --- a/src/app/components/table/table.spec.ts +++ b/src/app/components/table/table.spec.ts @@ -8,6 +8,7 @@ import { SharedModule } from 'primeng/api'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { DropdownModule } from 'primeng/dropdown'; import { EditableColumn, Table, TableModule } from './table'; +import type { Paginator } from '../paginator/paginator'; @Component({ template: ` @@ -444,17 +445,17 @@ describe('Table', () => { expect(table.summaryTemplate).toBeTruthy(); }); - it('should use 2 paginator', () => { + it('should use 2 paginators', () => { fixture.detectChanges(); table.paginator = true; table.rows = 5; table.paginatorPosition = 'both'; - const basicTableEl = fixture.debugElement.query(By.css('.basicTable')); fixture.detectChanges(); - const paginatorCount = basicTableEl.queryAll(By.css('p-paginator')); - expect(paginatorCount.length).toEqual(2); + const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); + const paginators = basicTableElement?.queryAll(By.css('p-paginator')); + expect(paginators?.length).toEqual(2); }); it('should use paginator and list 5 elements', () => { @@ -476,6 +477,33 @@ describe('Table', () => { expect(bodyRows.length).toEqual(5); }); + it('should pass top/botton styleClass to paginators', () => { + table.paginator = true; + table.paginatorPosition = 'both'; + fixture.detectChanges(); + + const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); + const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator); + expect(paginators).toEqual([ + jasmine.objectContaining({ styleClass: 'p-paginator-top' }), + jasmine.objectContaining({ styleClass: 'p-paginator-bottom' }) + ]); + }); + + it('should pass paginatorStyleClass to paginators', () => { + table.paginator = true; + table.paginatorPosition = 'both'; + table.paginatorStyleClass = 'p-paginator-custom'; + fixture.detectChanges(); + + const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); + const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator); + expect(paginators).toEqual([ + jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-top' }), + jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-bottom' }) + ]); + }); + it('should use custom filter and show 2 items', fakeAsync(() => { fixture.detectChanges(); diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index a62e121015a..e1751d45fda 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -146,7 +146,6 @@ export class TableService { [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" - styleClass="p-paginator-top" [alwaysShow]="alwaysShowPaginator" (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" @@ -162,7 +161,7 @@ export class TableService { [showJumpToPageDropdown]="showJumpToPageDropdown" [showJumpToPageInput]="showJumpToPageInput" [showPageLinks]="showPageLinks" - [styleClass]="paginatorStyleClass" + [styleClass]="getPaginatorStyleClasses('p-paginator-top')" [locale]="paginatorLocale" > @@ -265,7 +264,6 @@ export class TableService { [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" - styleClass="p-paginator-bottom" [alwaysShow]="alwaysShowPaginator" (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" @@ -281,7 +279,7 @@ export class TableService { [showJumpToPageDropdown]="showJumpToPageDropdown" [showJumpToPageInput]="showJumpToPageInput" [showPageLinks]="showPageLinks" - [styleClass]="paginatorStyleClass" + [styleClass]="getPaginatorStyleClasses('p-paginator-bottom')" [locale]="paginatorLocale" > @@ -3028,6 +3026,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.destroyStyleElement(); this.destroyResponsiveStyle(); } + + getPaginatorStyleClasses(className?: string) { + return [this.paginatorStyleClass, className].filter(c => !!c).join(' ').trim(); + } } @Component({ From 4e2240ee3e52d524726d902255fe1c4da5cd450d Mon Sep 17 00:00:00 2001 From: navedqb <109583873+navedqb@users.noreply.github.com> Date: Thu, 1 Feb 2024 15:52:59 +0530 Subject: [PATCH 17/38] fix placeholder not working in dropdown --- src/app/components/dropdown/dropdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index c1bd64f3bf7..e86dd3c6ae9 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -151,7 +151,7 @@ export class DropdownItem { {{ label() === 'p-emptylabel' ? ' ' : label() }} - {{ label() === 'p-emptylabel' ? ' ' : placeholder }} + {{ label() === 'p-emptylabel' ? ' ' : placeholder }} Date: Thu, 1 Feb 2024 13:53:49 +0300 Subject: [PATCH 18/38] sync primeng-sass-theme --- .../components/themes/arya-blue/theme.css | 700 +++++++---- .../components/themes/arya-green/theme.css | 700 +++++++---- .../components/themes/arya-orange/theme.css | 700 +++++++---- .../components/themes/arya-purple/theme.css | 700 +++++++---- .../themes/bootstrap4-dark-blue/theme.css | 701 +++++++---- .../themes/bootstrap4-dark-purple/theme.css | 701 +++++++---- .../themes/bootstrap4-light-blue/theme.css | 701 +++++++---- .../themes/bootstrap4-light-purple/theme.css | 701 +++++++---- .../components/themes/fluent-light/theme.css | 738 +++++++---- .../themes/lara-dark-blue/theme.css | 718 +++++++---- .../themes/lara-dark-indigo/theme.css | 718 +++++++---- .../themes/lara-dark-purple/theme.css | 718 +++++++---- .../themes/lara-dark-teal/theme.css | 718 +++++++---- .../themes/lara-light-blue/theme.css | 731 +++++++---- .../themes/lara-light-indigo/theme.css | 731 +++++++---- .../themes/lara-light-purple/theme.css | 731 +++++++---- .../themes/lara-light-teal/theme.css | 731 +++++++---- .../components/themes/luna-amber/theme.css | 727 +++++++---- .../components/themes/luna-blue/theme.css | 727 +++++++---- .../components/themes/luna-green/theme.css | 727 +++++++---- .../components/themes/luna-pink/theme.css | 727 +++++++---- .../themes/md-dark-deeppurple/theme.css | 1119 +++++++++++------ .../themes/md-dark-indigo/theme.css | 1119 +++++++++++------ .../themes/md-light-deeppurple/theme.css | 841 +++++++++---- .../themes/md-light-indigo/theme.css | 841 +++++++++---- .../themes/mdc-dark-deeppurple/theme.css | 1119 +++++++++++------ .../themes/mdc-dark-indigo/theme.css | 1119 +++++++++++------ .../themes/mdc-light-deeppurple/theme.css | 841 +++++++++---- .../themes/mdc-light-indigo/theme.css | 841 +++++++++---- src/assets/components/themes/mira/theme.css | 745 +++++++---- src/assets/components/themes/nano/theme.css | 698 ++++++---- .../components/themes/nova-accent/theme.css | 699 ++++++---- .../components/themes/nova-alt/theme.css | 702 +++++++---- src/assets/components/themes/nova/theme.css | 702 +++++++---- src/assets/components/themes/rhea/theme.css | 699 ++++++---- .../components/themes/saga-blue/theme.css | 700 +++++++---- .../components/themes/saga-green/theme.css | 700 +++++++---- .../components/themes/saga-orange/theme.css | 700 +++++++---- .../components/themes/saga-purple/theme.css | 700 +++++++---- .../components/themes/soho-dark/theme.css | 765 +++++++---- .../components/themes/soho-light/theme.css | 715 +++++++---- .../themes/tailwind-light/theme.css | 773 ++++++++---- .../components/themes/vela-blue/theme.css | 700 +++++++---- .../components/themes/vela-green/theme.css | 700 +++++++---- .../components/themes/vela-orange/theme.css | 700 +++++++---- .../components/themes/vela-purple/theme.css | 700 +++++++---- .../components/themes/viva-dark/theme.css | 729 +++++++---- .../components/themes/viva-light/theme.css | 729 +++++++---- 48 files changed, 23716 insertions(+), 12726 deletions(-) diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index e45570b9457..ea51d39179b 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1e1e1e; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #64B5F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #2396f2; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64B5F6; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #2396f2; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #64B5F6; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #64B5F6; background: transparent; @@ -2413,6 +2521,7 @@ color: #64B5F6; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2770,6 +2896,7 @@ background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2915,12 +3042,12 @@ background: #64B5F6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #64B5F6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #43a5f4; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #2396f2; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #93cbf9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #64B5F6; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #64B5F6; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #64B5F6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #64B5F6; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #64B5F6; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #64B5F6; } diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 7490449f657..56f135b5a65 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1e1e1e; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #81C784; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #54b358; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81C784; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #54b358; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #81C784; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #81C784; background: transparent; @@ -2413,6 +2521,7 @@ color: #81C784; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2770,6 +2896,7 @@ background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2915,12 +3042,12 @@ background: #81C784; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #81C784; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6abd6e; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #54b358; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #a7d8a9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #81C784; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #81C784; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #81C784; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #81C784; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #81C784; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #81C784; } diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 0fd19be8b9c..d5c32cf856b 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1e1e1e; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFD54F; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #ffc50c; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFD54F; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #ffc50c; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #FFD54F; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #FFD54F; background: transparent; @@ -2413,6 +2521,7 @@ color: #FFD54F; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2770,6 +2896,7 @@ background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2915,12 +3042,12 @@ background: #FFD54F; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #FFD54F; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #ffcd2e; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #ffc50c; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #ffe284; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #FFD54F; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFD54F; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFD54F; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #FFD54F; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #FFD54F; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #FFD54F; } diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index e0e49d76bdc..bc21770e81b 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1e1e1e; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #BA68C8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #a241b2; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a241b2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #BA68C8; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #a241b2; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #ffffff; background: #BA68C8; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #BA68C8; background: transparent; @@ -2413,6 +2521,7 @@ color: #BA68C8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2770,6 +2896,7 @@ background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2915,12 +3042,12 @@ background: #BA68C8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #383838; - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #BA68C8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #b052c0; color: #ffffff; @@ -4449,6 +4624,7 @@ color: #ffffff; border-color: #a241b2; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #cf95d9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #BA68C8; color: #ffffff; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #BA68C8; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #BA68C8; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #BA68C8; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #BA68C8; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 0d722e18212..61f7386cc90 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #f19ea6; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-autocomplete-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #2a323d; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f19ea6; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .p-datepicker { padding: 0; background: #2a323d; @@ -471,7 +490,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: color 0.15s, box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #8dd0ff; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f19ea6; } + .p-cascadeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #3f4b5b; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f19ea6; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #1dadff; color: #151515; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1dadff; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f19ea6; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -883,22 +919,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2a323d; border: 1px solid #3f4b5b; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f19ea6; } + .p-dropdown-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1005,6 +1046,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #3f4b5b; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f19ea6; } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #3f4b5b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1093,9 +1145,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1103,12 +1157,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8dd0ff; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f19ea6; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f19ea6; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #3f4b5b; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #3f4b5b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f19ea6; } + .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1354,9 +1429,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1364,6 +1441,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1452,6 +1530,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #3f4b5b; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f19ea6; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f19ea6; } + .p-password-panel { padding: 1.25rem; background: #2a323d; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1495,6 +1578,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1502,6 +1586,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #1dadff; color: #151515; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f19ea6; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1dadff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f19ea6; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #151515; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1600,7 +1692,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f19ea6; } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1691,7 +1786,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f19ea6; } + .p-treeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1760,12 +1857,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f19ea6; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1825,6 +1925,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #3f4b5b; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1841,6 +1943,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #151515; background: #8dd0ff; @@ -1952,7 +2055,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #151515; background: #7fd8e6; border: 1px solid #4cc8db; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #4cc8db; color: #151515; border-color: #26bdd3; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b1e8f0; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #26bdd3; color: #151515; border-color: #00b2cc; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(127, 216, 230, 0.16); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #7fd8e6; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); border-color: transparent; color: #7fd8e6; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(127, 216, 230, 0.16); border-color: transparent; color: #7fd8e6; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #151515; background: #9fdaa8; border: 1px solid #78cc86; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #78cc86; color: #151515; border-color: #5ac06c; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #c5e8ca; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #5ac06c; color: #151515; border-color: #3cb553; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(159, 218, 168, 0.16); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #9fdaa8; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); border-color: transparent; color: #9fdaa8; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(159, 218, 168, 0.16); border-color: transparent; color: #9fdaa8; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #151515; background: #ffe082; border: 1px solid #ffd54f; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd54f; color: #151515; border-color: #ffca28; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffecb3; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffca28; color: #151515; border-color: #ffc107; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #151515; background: #b7a2e0; border: 1px solid #9a7cd4; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9a7cd4; color: #151515; border-color: #845fca; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3c7ec; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #845fca; color: #151515; border-color: #6d43c0; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(183, 162, 224, 0.16); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #b7a2e0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); border-color: transparent; color: #b7a2e0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(183, 162, 224, 0.16); border-color: transparent; color: #b7a2e0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #151515; background: #f19ea6; border: 1px solid #e97984; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e97984; color: #151515; border-color: #f75965; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffd0d9; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f75965; color: #151515; border-color: #fd464e; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(241, 158, 166, 0.16); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f19ea6; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); border-color: transparent; color: #f19ea6; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(241, 158, 166, 0.16); border-color: transparent; color: #f19ea6; } + .p-button.p-button-link { color: #8dd0ff; background: transparent; @@ -2422,6 +2533,7 @@ color: #8dd0ff; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #3f4b5b; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #7fd8e6; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #7fd8e6; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #9fdaa8; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #9fdaa8; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #b7a2e0; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #b7a2e0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f19ea6; @@ -2735,8 +2863,9 @@ border-color: transparent; color: #f19ea6; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -2779,6 +2908,7 @@ background: #8dd0ff; color: #151515; } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2872,9 +3002,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2884,17 +3014,17 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -2924,12 +3054,12 @@ background: #8dd0ff; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #2a323d; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #2a323d; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0; border-radius: 0; @@ -3070,10 +3201,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3101,6 +3234,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-column-filter-overlay { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3157,6 +3292,7 @@ border-top: 1px solid #3f4b5b; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #3f4b5b; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #2a323d; - color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3217,14 +3363,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #3f4b5b; - background: #2a323d; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3270,6 +3416,7 @@ background: #2a323d; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-paginator { background: #2a323d; color: #8dd0ff; @@ -3317,9 +3465,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 1px solid #3f4b5b; color: #8dd0ff; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: #3f4b5b; color: #8dd0ff; @@ -3389,20 +3537,30 @@ border-color: #3f4b5b; color: #8dd0ff; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #2a323d; - color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3421,14 +3579,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #3f4b5b; - background: #2a323d; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3474,6 +3632,7 @@ background: #2a323d; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #3f4b5b; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3554,11 +3714,11 @@ color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3770,7 +3931,7 @@ background: #8dd0ff; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #2a323d; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3927,6 +4090,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3952,6 +4116,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3975,6 +4140,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -4015,6 +4181,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -4081,6 +4248,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -4091,6 +4259,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -4112,6 +4281,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4180,6 +4350,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -4190,6 +4361,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4237,6 +4409,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4309,6 +4482,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4350,6 +4524,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #3f4b5b; } + .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4360,7 +4535,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4370,13 +4545,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -4390,6 +4565,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4409,6 +4585,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3f4b5b; } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4448,6 +4625,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #56bdff; color: #151515; @@ -4458,6 +4636,7 @@ color: #151515; border-color: #1dadff; } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4489,6 +4668,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.87); } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4536,7 +4716,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4550,7 +4730,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4561,7 +4741,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4575,6 +4755,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4598,31 +4779,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4681,7 +4863,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4695,7 +4877,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4706,7 +4888,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4764,9 +4946,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.5rem 0; background: #2a323d; @@ -4803,7 +4986,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4817,7 +5000,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4828,7 +5011,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4862,6 +5045,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4900,7 +5084,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4931,7 +5115,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4945,7 +5129,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4956,7 +5140,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4973,6 +5157,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5147,7 +5332,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5161,7 +5346,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5172,7 +5357,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5212,6 +5397,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #2a323d; @@ -5254,7 +5440,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5268,7 +5454,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5279,7 +5465,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5326,6 +5512,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5370,6 +5557,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -5440,6 +5628,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #e3f3fe; } + .p-tieredmenu { padding: 0.5rem 0; background: #2a323d; @@ -5490,7 +5679,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5504,7 +5693,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5515,7 +5704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5529,6 +5718,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5584,6 +5774,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5672,6 +5863,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5722,7 +5914,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5732,7 +5924,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5742,7 +5934,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5752,9 +5944,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5785,7 +5978,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5842,7 +6035,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -5852,7 +6045,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } @@ -5861,23 +6054,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: color 0.15s, box-shadow 0.15s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5901,6 +6100,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5921,9 +6121,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #2a323d; } + .p-badge { background: #8dd0ff; color: #151515; @@ -5965,6 +6167,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -6000,6 +6203,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6014,6 +6218,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6029,6 +6234,7 @@ color: #151515; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6050,6 +6256,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6057,6 +6264,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #8dd0ff; color: #151515; @@ -6089,6 +6297,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index cfe50c0da55..86c43aa8397 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #f19ea6; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-autocomplete-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #2a323d; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f19ea6; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; border-color: #c298d8; } + .p-datepicker { padding: 0; background: #2a323d; @@ -471,7 +490,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: color 0.15s, box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #c298d8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f19ea6; } + .p-cascadeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #3f4b5b; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f19ea6; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #9954bb; color: #151515; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9954bb; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f19ea6; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -883,22 +919,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2a323d; border: 1px solid #3f4b5b; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f19ea6; } + .p-dropdown-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1005,6 +1046,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #3f4b5b; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f19ea6; } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #3f4b5b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1093,9 +1145,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1103,12 +1157,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c298d8; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f19ea6; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f19ea6; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #3f4b5b; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #3f4b5b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 1px #f0e6f5; border-color: #c298d8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f19ea6; } + .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1354,9 +1429,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1364,6 +1441,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1452,6 +1530,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #3f4b5b; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f19ea6; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f19ea6; } + .p-password-panel { padding: 1.25rem; background: #2a323d; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1495,6 +1578,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1502,6 +1586,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #9954bb; color: #151515; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f19ea6; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9954bb; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f19ea6; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #151515; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1600,7 +1692,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f19ea6; } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1691,7 +1786,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f19ea6; } + .p-treeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1760,12 +1857,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f19ea6; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1825,6 +1925,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #3f4b5b; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1841,6 +1943,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #151515; background: #c298d8; @@ -1952,7 +2055,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #151515; background: #7fd8e6; border: 1px solid #4cc8db; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #4cc8db; color: #151515; border-color: #26bdd3; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b1e8f0; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #26bdd3; color: #151515; border-color: #00b2cc; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(127, 216, 230, 0.16); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #7fd8e6; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); border-color: transparent; color: #7fd8e6; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(127, 216, 230, 0.16); border-color: transparent; color: #7fd8e6; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #151515; background: #9fdaa8; border: 1px solid #78cc86; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #78cc86; color: #151515; border-color: #5ac06c; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #c5e8ca; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #5ac06c; color: #151515; border-color: #3cb553; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(159, 218, 168, 0.16); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #9fdaa8; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); border-color: transparent; color: #9fdaa8; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(159, 218, 168, 0.16); border-color: transparent; color: #9fdaa8; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #151515; background: #ffe082; border: 1px solid #ffd54f; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd54f; color: #151515; border-color: #ffca28; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffecb3; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffca28; color: #151515; border-color: #ffc107; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #151515; background: #b7a2e0; border: 1px solid #9a7cd4; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9a7cd4; color: #151515; border-color: #845fca; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3c7ec; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #845fca; color: #151515; border-color: #6d43c0; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(183, 162, 224, 0.16); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #b7a2e0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); border-color: transparent; color: #b7a2e0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(183, 162, 224, 0.16); border-color: transparent; color: #b7a2e0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #151515; background: #f19ea6; border: 1px solid #e97984; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e97984; color: #151515; border-color: #f75965; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffd0d9; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f75965; color: #151515; border-color: #fd464e; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(241, 158, 166, 0.16); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f19ea6; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); border-color: transparent; color: #f19ea6; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(241, 158, 166, 0.16); border-color: transparent; color: #f19ea6; } + .p-button.p-button-link { color: #c298d8; background: transparent; @@ -2422,6 +2533,7 @@ color: #c298d8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #3f4b5b; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #7fd8e6; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #7fd8e6; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #9fdaa8; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #9fdaa8; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #b7a2e0; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #b7a2e0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f19ea6; @@ -2735,8 +2863,9 @@ border-color: transparent; color: #f19ea6; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -2779,6 +2908,7 @@ background: #c298d8; color: #151515; } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2872,9 +3002,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2884,17 +3014,17 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -2924,12 +3054,12 @@ background: #c298d8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #2a323d; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #2a323d; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0; border-radius: 0; @@ -3070,10 +3201,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3101,6 +3234,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-column-filter-overlay { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3157,6 +3292,7 @@ border-top: 1px solid #3f4b5b; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #3f4b5b; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #2a323d; - color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3217,14 +3363,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #3f4b5b; - background: #2a323d; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3270,6 +3416,7 @@ background: #2a323d; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-paginator { background: #2a323d; color: #c298d8; @@ -3317,9 +3465,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 1px solid #3f4b5b; color: #c298d8; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: #3f4b5b; color: #c298d8; @@ -3389,20 +3537,30 @@ border-color: #3f4b5b; color: #c298d8; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #2a323d; - color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3421,14 +3579,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #3f4b5b; - background: #2a323d; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3474,6 +3632,7 @@ background: #2a323d; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #3f4b5b; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3554,11 +3714,11 @@ color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3770,7 +3931,7 @@ background: #c298d8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #2a323d; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3927,6 +4090,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3952,6 +4116,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3975,6 +4140,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -4015,6 +4181,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -4081,6 +4248,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -4091,6 +4259,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -4112,6 +4281,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4180,6 +4350,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -4190,6 +4361,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4237,6 +4409,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4309,6 +4482,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4350,6 +4524,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #3f4b5b; } + .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4360,7 +4535,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4370,13 +4545,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -4390,6 +4565,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4409,6 +4585,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3f4b5b; } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4448,6 +4625,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #aa70c7; color: #151515; @@ -4458,6 +4636,7 @@ color: #151515; border-color: #9954bb; } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4489,6 +4668,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.87); } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4536,7 +4716,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4550,7 +4730,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4561,7 +4741,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4575,6 +4755,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4598,31 +4779,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4681,7 +4863,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4695,7 +4877,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4706,7 +4888,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4764,9 +4946,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.5rem 0; background: #2a323d; @@ -4803,7 +4986,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4817,7 +5000,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4828,7 +5011,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4862,6 +5045,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4900,7 +5084,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4931,7 +5115,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4945,7 +5129,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4956,7 +5140,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4973,6 +5157,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5147,7 +5332,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5161,7 +5346,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5172,7 +5357,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5212,6 +5397,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #2a323d; @@ -5254,7 +5440,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5268,7 +5454,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5279,7 +5465,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5326,6 +5512,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5370,6 +5557,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -5440,6 +5628,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #f0e6f5; } + .p-tieredmenu { padding: 0.5rem 0; background: #2a323d; @@ -5490,7 +5679,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5504,7 +5693,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5515,7 +5704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5529,6 +5718,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5584,6 +5774,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5672,6 +5863,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5722,7 +5914,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5732,7 +5924,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5742,7 +5934,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5752,9 +5944,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5785,7 +5978,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5842,7 +6035,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -5852,7 +6045,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } @@ -5861,23 +6054,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: color 0.15s, box-shadow 0.15s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5901,6 +6100,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5921,9 +6121,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #2a323d; } + .p-badge { background: #c298d8; color: #151515; @@ -5965,6 +6167,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -6000,6 +6203,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6014,6 +6218,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6029,6 +6234,7 @@ color: #151515; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6050,6 +6256,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6057,6 +6264,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #c298d8; color: #151515; @@ -6089,6 +6297,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index d6234e4f161..a341907cd25 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #dc3545; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-autocomplete-panel { background: #ffffff; color: #212529; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #dc3545; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -432,19 +447,23 @@ color: #495057; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #495057; right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-datepicker { padding: 0; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -481,13 +500,13 @@ transition: box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #212529; transition: box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007bff; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -659,10 +679,12 @@ color: #495057; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #495057; right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #dc3545; } + .p-cascadeselect-panel { background: #ffffff; color: #212529; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #efefef; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #dc3545; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -763,6 +789,7 @@ color: #495057; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #0062cc; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0062cc; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #dc3545; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -883,22 +919,26 @@ color: #495057; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #212529; border: 1px solid #212529; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #dc3545; } + .p-dropdown-panel { background: #ffffff; color: #212529; @@ -1005,6 +1046,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-dropdown { background: #efefef; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #dc3545; } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1093,9 +1145,11 @@ color: #495057; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1103,12 +1157,14 @@ color: #495057; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #007bff; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #dc3545; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6c757d; transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #dc3545; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #efefef; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #efefef; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #212529; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #dc3545; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1354,9 +1429,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1364,6 +1441,7 @@ color: #495057; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #212529; @@ -1452,6 +1530,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-multiselect { background: #efefef; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #dc3545; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #dc3545; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1495,6 +1578,7 @@ color: #495057; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1502,6 +1586,7 @@ color: #495057; right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #0062cc; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #dc3545; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0062cc; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #dc3545; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1600,7 +1692,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #dc3545; } + .p-slider { background: #e9ecef; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1691,7 +1786,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #dc3545; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1760,12 +1857,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dc3545; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #212529; @@ -1825,6 +1925,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-treeselect { background: #efefef; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1841,6 +1943,7 @@ color: #495057; right: 2.357rem; } + .p-button { color: #ffffff; background: #007bff; @@ -1952,7 +2055,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #17a2b8; border: 1px solid #17a2b8; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(23, 162, 184, 0.16); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #17a2b8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); border-color: transparent; color: #17a2b8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(23, 162, 184, 0.16); border-color: transparent; color: #17a2b8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #28a745; border: 1px solid #28a745; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #218838; color: #ffffff; border-color: #1e7e34; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #1e7e34; color: #ffffff; border-color: #1c7430; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(40, 167, 69, 0.16); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #28a745; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); border-color: transparent; color: #28a745; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(40, 167, 69, 0.16); border-color: transparent; color: #28a745; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffc107; border: 1px solid #ffc107; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #e0a800; color: #212529; border-color: #d39e00; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d39e00; color: #212529; border-color: #c69500; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 193, 7, 0.16); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffc107; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); border-color: transparent; color: #ffc107; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 193, 7, 0.16); border-color: transparent; color: #ffc107; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #6f42c1; border: 1px solid #6f42c1; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #633bad; color: #ffffff; border-color: #58349a; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d3c6ec; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #58349a; color: #ffffff; border-color: #4d2e87; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(111, 66, 193, 0.16); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #6f42c1; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); border-color: transparent; color: #6f42c1; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(111, 66, 193, 0.16); border-color: transparent; color: #6f42c1; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #dc3545; border: 1px solid #dc3545; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c82333; color: #ffffff; border-color: #bd2130; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #bd2130; color: #ffffff; border-color: #b21f2d; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(220, 53, 69, 0.16); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #dc3545; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); border-color: transparent; color: #dc3545; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(220, 53, 69, 0.16); border-color: transparent; color: #dc3545; } + .p-button.p-button-link { color: #007bff; background: transparent; @@ -2422,6 +2533,7 @@ color: #007bff; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #17a2b8; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #17a2b8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #28a745; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #28a745; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffc107; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffc107; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #6f42c1; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #6f42c1; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #dc3545; @@ -2735,8 +2863,9 @@ border-color: transparent; color: #dc3545; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -2779,6 +2908,7 @@ background: #007bff; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2872,9 +3002,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2884,17 +3014,17 @@ transition: box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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(38, 143, 255, 0.5); @@ -2924,12 +3054,12 @@ background: #007bff; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #efefef; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3070,10 +3201,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3101,6 +3234,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-column-filter-overlay { background: #ffffff; color: #212529; @@ -3157,6 +3292,7 @@ border-top: 1px solid #dee2e6; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #dee2e6; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } .p-orderlist .p-orderlist-header { - background: #efefef; color: #212529; - border: 1px solid #dee2e6; padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3217,14 +3363,13 @@ color: #495057; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #212529; padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3270,6 +3416,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-paginator { background: #ffffff; color: #007bff; @@ -3317,9 +3465,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: #ffffff; border: 1px solid #dee2e6; color: #007bff; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #dee2e6; color: #007bff; @@ -3389,20 +3537,30 @@ border-color: #dee2e6; color: #007bff; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } .p-picklist .p-picklist-header { - background: #efefef; color: #212529; - border: 1px solid #dee2e6; padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3421,14 +3579,13 @@ color: #495057; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #212529; padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3474,6 +3632,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3554,11 +3714,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3770,7 +3931,7 @@ background: #007bff; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #efefef; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #efefef; color: #212529; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3927,6 +4090,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: #212529; @@ -3952,6 +4116,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3975,6 +4140,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4015,6 +4181,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -4081,6 +4248,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -4091,6 +4259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4112,6 +4281,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4180,6 +4350,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -4190,6 +4361,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -4237,6 +4409,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4309,6 +4482,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4350,6 +4524,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar { background: #ffffff; color: #212529; @@ -4360,7 +4535,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4370,13 +4545,13 @@ transition: box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -4390,6 +4565,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4409,6 +4585,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #212529; } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4448,6 +4625,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0069d9; color: #ffffff; @@ -4458,6 +4636,7 @@ color: #ffffff; border-color: #0062cc; } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4489,6 +4668,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4536,7 +4716,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4550,7 +4730,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4561,7 +4741,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem-separator { @@ -4575,6 +4755,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4598,31 +4779,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4681,7 +4863,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4695,7 +4877,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4706,7 +4888,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-megamenu-panel { @@ -4764,9 +4946,10 @@ color: rgba(0, 0, 0, 0.7); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4803,7 +4986,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4817,7 +5000,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4828,7 +5011,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu.p-menu-overlay { @@ -4862,6 +5045,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4900,7 +5084,7 @@ color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4931,7 +5115,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4945,7 +5129,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4956,7 +5140,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-submenu-list { @@ -4973,6 +5157,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5147,7 +5332,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5161,7 +5346,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5172,7 +5357,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5212,6 +5397,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5254,7 +5440,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5268,7 +5454,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5279,7 +5465,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu.p-slidemenu-overlay { @@ -5326,6 +5512,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5370,6 +5557,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -5440,6 +5628,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5490,7 +5679,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5504,7 +5693,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5515,7 +5704,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem-separator { @@ -5529,6 +5718,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5584,6 +5774,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5672,6 +5863,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5722,7 +5914,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5732,7 +5924,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5742,7 +5934,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5752,9 +5944,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5785,7 +5978,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5842,7 +6035,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #efefef; @@ -5852,7 +6045,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; } @@ -5861,23 +6054,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: box-shadow 0.15s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5901,6 +6100,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5921,9 +6121,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007bff; color: #ffffff; @@ -5965,6 +6167,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #212529; @@ -6000,6 +6203,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6014,6 +6218,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6029,6 +6234,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6050,6 +6256,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -6057,6 +6264,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007bff; color: #ffffff; @@ -6089,6 +6297,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #212529; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index e8327fa8aeb..0dc44e8b957 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #dc3545; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-autocomplete-panel { background: #ffffff; color: #212529; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #dc3545; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -432,19 +447,23 @@ color: #495057; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #495057; right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); border-color: #883cae; } + .p-datepicker { padding: 0; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -481,13 +500,13 @@ transition: box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #212529; transition: box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #883cae; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -659,10 +679,12 @@ color: #495057; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #495057; right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #dc3545; } + .p-cascadeselect-panel { background: #ffffff; color: #212529; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #efefef; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #dc3545; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -763,6 +789,7 @@ color: #495057; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #68329e; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #68329e; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #dc3545; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -883,22 +919,26 @@ color: #495057; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #212529; border: 1px solid #212529; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #dc3545; } + .p-dropdown-panel { background: #ffffff; color: #212529; @@ -1005,6 +1046,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-dropdown { background: #efefef; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #dc3545; } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1093,9 +1145,11 @@ color: #495057; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1103,12 +1157,14 @@ color: #495057; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #883cae; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #dc3545; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6c757d; transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #dc3545; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #efefef; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #efefef; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #212529; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); border-color: #883cae; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #dc3545; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1354,9 +1429,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1364,6 +1441,7 @@ color: #495057; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #212529; @@ -1452,6 +1530,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-multiselect { background: #efefef; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #dc3545; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #dc3545; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1495,6 +1578,7 @@ color: #495057; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1502,6 +1586,7 @@ color: #495057; right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #68329e; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #dc3545; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #68329e; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #dc3545; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1600,7 +1692,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #dc3545; } + .p-slider { background: #e9ecef; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1691,7 +1786,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #dc3545; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1760,12 +1857,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dc3545; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #212529; @@ -1825,6 +1925,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-treeselect { background: #efefef; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1841,6 +1943,7 @@ color: #495057; right: 2.357rem; } + .p-button { color: #ffffff; background: #883cae; @@ -1952,7 +2055,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #17a2b8; border: 1px solid #17a2b8; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(23, 162, 184, 0.16); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #17a2b8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); border-color: transparent; color: #17a2b8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(23, 162, 184, 0.16); border-color: transparent; color: #17a2b8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #28a745; border: 1px solid #28a745; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #218838; color: #ffffff; border-color: #1e7e34; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #1e7e34; color: #ffffff; border-color: #1c7430; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(40, 167, 69, 0.16); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #28a745; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); border-color: transparent; color: #28a745; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(40, 167, 69, 0.16); border-color: transparent; color: #28a745; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffc107; border: 1px solid #ffc107; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #e0a800; color: #212529; border-color: #d39e00; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d39e00; color: #212529; border-color: #c69500; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 193, 7, 0.16); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffc107; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); border-color: transparent; color: #ffc107; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 193, 7, 0.16); border-color: transparent; color: #ffc107; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #6f42c1; border: 1px solid #6f42c1; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #633bad; color: #ffffff; border-color: #58349a; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d3c6ec; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #58349a; color: #ffffff; border-color: #4d2e87; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(111, 66, 193, 0.16); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #6f42c1; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); border-color: transparent; color: #6f42c1; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(111, 66, 193, 0.16); border-color: transparent; color: #6f42c1; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #dc3545; border: 1px solid #dc3545; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c82333; color: #ffffff; border-color: #bd2130; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #bd2130; color: #ffffff; border-color: #b21f2d; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(220, 53, 69, 0.16); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #dc3545; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); border-color: transparent; color: #dc3545; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(220, 53, 69, 0.16); border-color: transparent; color: #dc3545; } + .p-button.p-button-link { color: #883cae; background: transparent; @@ -2422,6 +2533,7 @@ color: #883cae; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #17a2b8; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #17a2b8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #28a745; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #28a745; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffc107; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffc107; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #6f42c1; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #6f42c1; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #dc3545; @@ -2735,8 +2863,9 @@ border-color: transparent; color: #dc3545; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -2779,6 +2908,7 @@ background: #883cae; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2872,9 +3002,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2884,17 +3014,17 @@ transition: box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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(136, 60, 174, 0.5); @@ -2924,12 +3054,12 @@ background: #883cae; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #efefef; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3070,10 +3201,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3101,6 +3234,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-column-filter-overlay { background: #ffffff; color: #212529; @@ -3157,6 +3292,7 @@ border-top: 1px solid #dee2e6; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #dee2e6; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + border-color: #883cae; + } .p-orderlist .p-orderlist-header { - background: #efefef; color: #212529; - border: 1px solid #dee2e6; padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3217,14 +3363,13 @@ color: #495057; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #212529; padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3270,6 +3416,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-paginator { background: #ffffff; color: #883cae; @@ -3317,9 +3465,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: #ffffff; border: 1px solid #dee2e6; color: #883cae; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #dee2e6; color: #883cae; @@ -3389,20 +3537,30 @@ border-color: #dee2e6; color: #883cae; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + border-color: #883cae; + } .p-picklist .p-picklist-header { - background: #efefef; color: #212529; - border: 1px solid #dee2e6; padding: 1rem 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3421,14 +3579,13 @@ color: #495057; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #212529; padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3474,6 +3632,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3554,11 +3714,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3770,7 +3931,7 @@ background: #883cae; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #efefef; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #efefef; color: #212529; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3927,6 +4090,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: #212529; @@ -3952,6 +4116,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3975,6 +4140,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4015,6 +4181,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -4081,6 +4248,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -4091,6 +4259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4112,6 +4281,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4180,6 +4350,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -4190,6 +4361,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -4237,6 +4409,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4309,6 +4482,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4350,6 +4524,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar { background: #ffffff; color: #212529; @@ -4360,7 +4535,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4370,13 +4545,13 @@ transition: box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -4390,6 +4565,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4409,6 +4585,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #212529; } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4448,6 +4625,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #7a38a7; color: #ffffff; @@ -4458,6 +4636,7 @@ color: #ffffff; border-color: #68329e; } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4489,6 +4668,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4536,7 +4716,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4550,7 +4730,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4561,7 +4741,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem-separator { @@ -4575,6 +4755,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4598,31 +4779,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4681,7 +4863,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4695,7 +4877,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4706,7 +4888,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-megamenu-panel { @@ -4764,9 +4946,10 @@ color: rgba(0, 0, 0, 0.7); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4803,7 +4986,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4817,7 +5000,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4828,7 +5011,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu.p-menu-overlay { @@ -4862,6 +5045,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4900,7 +5084,7 @@ color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4931,7 +5115,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4945,7 +5129,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4956,7 +5140,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-submenu-list { @@ -4973,6 +5157,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5147,7 +5332,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5161,7 +5346,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5172,7 +5357,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5212,6 +5397,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5254,7 +5440,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5268,7 +5454,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5279,7 +5465,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu.p-slidemenu-overlay { @@ -5326,6 +5512,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5370,6 +5557,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -5440,6 +5628,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5490,7 +5679,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5504,7 +5693,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5515,7 +5704,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem-separator { @@ -5529,6 +5718,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5584,6 +5774,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5672,6 +5863,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5722,7 +5914,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5732,7 +5924,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5742,7 +5934,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5752,9 +5944,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5785,7 +5978,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5842,7 +6035,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #efefef; @@ -5852,7 +6045,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; } @@ -5861,23 +6054,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: box-shadow 0.15s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5901,6 +6100,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5921,9 +6121,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #883cae; color: #ffffff; @@ -5965,6 +6167,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #212529; @@ -6000,6 +6203,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6014,6 +6218,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6029,6 +6234,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6050,6 +6256,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -6057,6 +6264,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #883cae; color: #ffffff; @@ -6089,6 +6297,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #212529; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 6a6a1ece77f..4b3747ea3f8 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #a4252c; } + .p-text-secondary { color: #605e5c; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .p-autocomplete-panel { background: #ffffff; color: #323130; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a4252c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: #605e5c; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #605e5c; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a4252c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .p-datepicker { padding: 0.75rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 2px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #605e5c; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #323130; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #0078d4; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: #605e5c; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #605e5c; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a4252c; } + .p-cascadeselect-panel { background: #ffffff; color: #323130; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #faf9f8; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a4252c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: #605e5c; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #005a9e; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a4252c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #faf9f8; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005a9e; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a4252c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #323130; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a4252c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: #605e5c; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; } + .p-dropdown { background: #ffffff; border: 1px solid #605e5c; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a4252c; } + .p-dropdown-panel { background: #ffffff; color: #323130; @@ -1002,6 +1042,7 @@ color: #323130; background: transparent; } + .p-input-filled .p-dropdown { background: #faf9f8; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a4252c; } + .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #605e5c; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a4252c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: #605e5c; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a4252c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: #605e5c; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #005a9e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a4252c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #605e5c; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a4252c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #605e5c; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #605e5c; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #605e5c; } + :-moz-placeholder { color: #605e5c; } + ::-moz-placeholder { color: #605e5c; } + :-ms-input-placeholder { color: #605e5c; } + .p-input-filled .p-inputtext { background-color: #faf9f8; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #faf9f8; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #323130; @@ -1309,9 +1381,11 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a4252c; } + .p-multiselect { background: #ffffff; border: 1px solid #605e5c; @@ -1351,9 +1425,11 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: #605e5c; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #323130; @@ -1449,6 +1526,7 @@ color: #323130; background: transparent; } + .p-input-filled .p-multiselect { background: #faf9f8; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a4252c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a4252c; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #498205; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: #605e5c; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: #605e5c; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #ffffff; color: #005a9e; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a4252c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #faf9f8; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #a4252c; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #605e5c; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #605e5c; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #323130; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #605e5c; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #323130; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #323130; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #323130; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #323130; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a4252c; } + .p-slider { background: #c8c6c4; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #605e5c; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #605e5c; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #323130; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #605e5c; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #323130; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #323130; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #323130; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #323130; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a4252c; } + .p-treeselect { background: #ffffff; border: 1px solid #605e5c; @@ -1751,12 +1845,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a4252c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #323130; @@ -1816,6 +1913,7 @@ color: #323130; background: transparent; } + .p-input-filled .p-treeselect { background: #faf9f8; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: #605e5c; right: 2.357rem; } + .p-button { color: #ffffff; background: #0078d4; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #d45c00; border: 1px solid #d45c00; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #bf5300; color: #ffffff; border-color: #bf5300; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffbc88; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #aa4a00; color: #ffffff; border-color: #aa4a00; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #d45c00; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(212, 92, 0, 0.04); color: #d45c00; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(212, 92, 0, 0.16); color: #d45c00; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #d45c00; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(212, 92, 0, 0.04); border-color: transparent; color: #d45c00; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(212, 92, 0, 0.16); border-color: transparent; color: #d45c00; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #00b7c3; border: 1px solid #00b7c3; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #00a5b0; color: #ffffff; border-color: #00a5b0; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #81f7ff; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #00929c; color: #ffffff; border-color: #00929c; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #00b7c3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 183, 195, 0.04); color: #00b7c3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 183, 195, 0.16); color: #00b7c3; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #00b7c3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 183, 195, 0.04); border-color: transparent; color: #00b7c3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 183, 195, 0.16); border-color: transparent; color: #00b7c3; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #498205; border: 1px solid #498205; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #427505; color: #ffffff; border-color: #427505; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #baf96f; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #3a6804; color: #ffffff; border-color: #3a6804; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #498205; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(73, 130, 5, 0.04); color: #498205; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(73, 130, 5, 0.16); color: #498205; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #498205; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(73, 130, 5, 0.04); border-color: transparent; color: #498205; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(73, 130, 5, 0.16); border-color: transparent; color: #498205; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #323130; background: #ffaa44; border: 1px solid #ffaa44; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ff9b24; color: #323130; border-color: #ff9b24; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffddb4; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff8d03; color: #323130; border-color: #ff8d03; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffaa44; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 170, 68, 0.04); color: #ffaa44; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 170, 68, 0.16); color: #ffaa44; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffaa44; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 170, 68, 0.04); border-color: transparent; color: #ffaa44; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 170, 68, 0.16); border-color: transparent; color: #ffaa44; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #8378de; border: 1px solid #8378de; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #6a5dd7; color: #ffffff; border-color: #6a5dd7; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #cdc9f2; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #5141d1; color: #ffffff; border-color: #5141d1; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #8378de; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(131, 120, 222, 0.04); color: #8378de; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(131, 120, 222, 0.16); color: #8378de; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #8378de; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(131, 120, 222, 0.04); border-color: transparent; color: #8378de; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(131, 120, 222, 0.16); border-color: transparent; color: #8378de; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d13438; border: 1px solid #d13438; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02b2f; color: #ffffff; border-color: #c02b2f; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edaeaf; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa272a; color: #ffffff; border-color: #aa272a; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d13438; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(209, 52, 56, 0.04); color: #d13438; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(209, 52, 56, 0.16); color: #d13438; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d13438; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(209, 52, 56, 0.04); border-color: transparent; color: #d13438; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(209, 52, 56, 0.16); border-color: transparent; color: #d13438; } + .p-button.p-button-link { color: #0078d4; background: transparent; @@ -2413,6 +2521,7 @@ color: #0078d4; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #605e5c; color: #ffffff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 2px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #d45c00; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #d45c00; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #00b7c3; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #00b7c3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #498205; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #498205; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffaa44; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffaa44; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #8378de; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #8378de; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d13438; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #d13438; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #605e5c; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -2770,6 +2896,7 @@ background: #edebe9; color: #323130; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #605e5c; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -2915,12 +3042,12 @@ background: #0078d4; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #faf9f8; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-column-filter-overlay { background: #ffffff; color: #323130; @@ -3148,6 +3280,7 @@ border-top: 1px solid #edebe9; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 0.5rem; border-bottom: 1px solid #edebe9; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #a19f9d; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } .p-orderlist .p-orderlist-header { - background: #faf9f8; color: #323130; - border: 1px solid #a19f9d; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 2px; - border-top-left-radius: 2px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: #605e5c; } .p-orderlist .p-orderlist-list { - border: 1px solid #a19f9d; - background: #ffffff; color: #323130; padding: 0; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #a19f9d; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.5rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f2f1; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.5rem; box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f2f1; color: #323130; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-paginator { background: #ffffff; color: #605e5c; @@ -3308,9 +3453,9 @@ border-radius: 2px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #605e5c; @@ -3321,9 +3466,9 @@ border-radius: 2px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f2f1; border-color: transparent; color: #323130; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #323130; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #a19f9d; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } .p-picklist .p-picklist-header { - background: #faf9f8; color: #323130; - border: 1px solid #a19f9d; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 2px; - border-top-left-radius: 2px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: #605e5c; } .p-picklist .p-picklist-list { - border: 1px solid #a19f9d; - background: #ffffff; color: #323130; padding: 0; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #a19f9d; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.5rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f2f1; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.5rem; box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #a19f9d; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #a19f9d; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #323130; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #323130; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #323130; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #0078d4; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #faf9f8; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: #323130; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #a19f9d; @@ -3894,6 +4054,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #323130; @@ -3919,6 +4080,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3942,6 +4104,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #a19f9d; background: #ffffff; @@ -3982,6 +4145,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #a19f9d; padding: 1rem; @@ -4048,6 +4212,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f3f2f1; border: 0 none; @@ -4058,6 +4223,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-splitter { border: 1px solid #a19f9d; background: #ffffff; @@ -4079,6 +4245,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #edebe9; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4147,6 +4314,7 @@ border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } + .p-toolbar { background: #faf9f8; border: 1px solid #a19f9d; @@ -4157,6 +4325,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #323130; @@ -4204,6 +4373,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px; @@ -4276,6 +4446,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #323130; @@ -4317,6 +4488,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #323130; @@ -4327,7 +4499,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #605e5c; @@ -4337,13 +4509,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -4357,6 +4529,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #ffffff; color: #323130; @@ -4376,6 +4549,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #ffffff; } + .p-fileupload .p-fileupload-buttonbar { background: #faf9f8; padding: 1rem; @@ -4415,6 +4589,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #106ebe; color: #ffffff; @@ -4425,6 +4600,7 @@ color: #ffffff; border-color: #005a9e; } + .p-breadcrumb { background: #ffffff; border: 1px solid #eeeeee; @@ -4456,6 +4632,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #0078d4; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4503,7 +4680,7 @@ color: #323130; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4517,7 +4694,7 @@ color: #323130; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4528,7 +4705,7 @@ color: #323130; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-contextmenu .p-menuitem-separator { @@ -4542,6 +4719,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4565,31 +4743,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4648,7 +4827,7 @@ color: #323130; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4662,7 +4841,7 @@ color: #323130; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4673,7 +4852,7 @@ color: #323130; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-megamenu .p-megamenu-panel { @@ -4731,9 +4910,10 @@ color: #323130; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } + .p-menu { padding: 0; background: #ffffff; @@ -4770,7 +4950,7 @@ color: #323130; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4784,7 +4964,7 @@ color: #323130; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4795,7 +4975,7 @@ color: #323130; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menu.p-menu-overlay { @@ -4829,6 +5009,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4867,7 +5048,7 @@ color: #323130; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4898,7 +5079,7 @@ color: #323130; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4912,7 +5093,7 @@ color: #323130; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4923,7 +5104,7 @@ color: #323130; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menubar .p-submenu-list { @@ -4940,6 +5121,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5114,7 +5296,7 @@ color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5128,7 +5310,7 @@ color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5139,7 +5321,7 @@ color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5155,6 +5337,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5197,7 +5380,7 @@ color: #323130; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5211,7 +5394,7 @@ color: #323130; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5222,7 +5405,7 @@ color: #323130; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-slidemenu.p-slidemenu-overlay { @@ -5269,6 +5452,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5313,6 +5497,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 0 none; @@ -5383,6 +5568,7 @@ outline-offset: 0; box-shadow: inset inset 0 0 0 1px #605e5c; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5433,7 +5619,7 @@ color: #323130; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5447,7 +5633,7 @@ color: #323130; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5458,7 +5644,7 @@ color: #323130; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-tieredmenu .p-menuitem-separator { @@ -5472,6 +5658,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5527,6 +5714,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5615,6 +5803,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5665,7 +5854,7 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #605e5c; } .p-toast .p-toast-message.p-toast-message-success { @@ -5675,7 +5864,7 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #107c10; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5685,7 +5874,7 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #797775; } .p-toast .p-toast-message.p-toast-message-error { @@ -5695,9 +5884,10 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #a80000; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5728,7 +5918,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5785,7 +5975,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #faf9f8; @@ -5795,7 +5985,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #faf9f8; } @@ -5804,23 +5994,29 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5844,6 +6040,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #edebe9; border-radius: 2px; @@ -5864,9 +6061,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #0078d4; color: #ffffff; @@ -5908,6 +6107,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #edebe9; color: #323130; @@ -5943,6 +6143,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 2px; @@ -5957,6 +6158,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-progressbar { border: 0 none; height: 2px; @@ -5972,6 +6174,7 @@ color: #ffffff; line-height: 2px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5993,6 +6196,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #edebe9; border-radius: 2px; @@ -6000,6 +6204,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #0078d4; color: #ffffff; @@ -6032,6 +6237,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #323130; @@ -6049,6 +6255,7 @@ .p-button-label { font-weight: 600; } + .p-slider:not(.p-disabled):hover { background-color: #deecf9; } @@ -6058,6 +6265,7 @@ .p-slider:not(.p-disabled):hover .p-slider-handle { border-color: #005a9e; } + .p-inputswitch { width: 40px; height: 20px; @@ -6085,6 +6293,7 @@ .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { border-color: #0078d4; } + .p-datepicker .p-datepicker-header .p-datepicker-title { order: 1; margin: 0 auto 0 0; @@ -6137,42 +6346,53 @@ .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem 0; } + .p-datatable { font-size: 90%; } + .p-toast { font-size: 90%; } .p-toast .p-toast-icon-close-icon { font-size: 90%; } + .p-message { font-size: 90%; } .p-message .p-message-close .p-message-close-icon { font-size: 90%; } + .p-tooltip .p-tooltip-text { font-size: 90%; } + .p-component .p-menu-separator { border-color: #eeeeee; } + .p-submenu-icon { color: #605e5c !important; } + .p-menuitem-active .p-submenu-icon { color: #323130 !important; } + .p-progressbar-label { display: none !important; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #0078d4; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #0078d4; } + .p-inputtext:disabled { background-color: #f3f2f1; border-color: #f3f2f1; @@ -6183,10 +6403,11 @@ .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #0078d4; } + .p-checkbox .p-checkbox-box.p-disabled, - .p-radiobutton .p-radiobutton-box.p-disabled, - .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container.p-disabled, - .p-chips .p-chips-multiple-container.p-disabled { +.p-radiobutton .p-radiobutton-box.p-disabled, +.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container.p-disabled, +.p-chips .p-chips-multiple-container.p-disabled { background-color: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; @@ -6194,13 +6415,14 @@ user-select: none; } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus, - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus, - .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus, +.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #0078d4; } + .p-dropdown.p-disabled, - .p-multiselect.p-disabled { +.p-multiselect.p-disabled { background-color: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; @@ -6208,20 +6430,22 @@ user-select: none; } .p-dropdown.p-disabled .p-dropdown-label, - .p-dropdown.p-disabled .p-dropdown-trigger-icon, - .p-multiselect.p-disabled .p-dropdown-label, - .p-multiselect.p-disabled .p-dropdown-trigger-icon { +.p-dropdown.p-disabled .p-dropdown-trigger-icon, +.p-multiselect.p-disabled .p-dropdown-label, +.p-multiselect.p-disabled .p-dropdown-trigger-icon { color: #a19f9d; } .p-dropdown:not(.p-disabled).p-focus, - .p-multiselect:not(.p-disabled).p-focus { +.p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #0078d4; } + .p-inputswitch.p-focus .p-inputswitch-slider { box-shadow: none; outline: 1px solid #605e5c; outline-offset: 2px; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #0078d4; } diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index eb3ae56f92b..32c6fee4392 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -439,9 +452,11 @@ background: #374151; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #60a5fa; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #bfdbfe; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #bfdbfe; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #60a5fa; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1019,6 +1059,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #93c5fd; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1466,6 +1543,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #bfdbfe; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #bfdbfe; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1833,6 +1930,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #60a5fa; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #60a5fa; background: transparent; @@ -2430,6 +2538,7 @@ color: #60a5fa; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -2787,6 +2913,7 @@ background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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(96, 165, 250, 0.2); @@ -2932,12 +3059,12 @@ background: #60a5fa; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3165,6 +3297,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3278,6 +3421,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3483,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3397,20 +3542,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3482,6 +3637,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #60a5fa; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3562,11 +3719,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #60a5fa; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #93c5fd; color: #030712; @@ -4442,6 +4617,7 @@ color: #030712; border-color: #bfdbfe; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4520,7 +4697,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4787,7 +4967,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4884,7 +5065,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5214,7 +5397,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5450,7 +5636,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #60a5fa; color: #030712; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #60a5fa; color: #030712; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6065,25 +6271,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #60a5fa; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #60a5fa; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(96, 165, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6105,37 +6318,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #60a5fa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #60a5fa; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #60a5fa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #60a5fa; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(96, 165, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #60a5fa; color: #030712; diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 288a43a262b..f69408b2f49 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -439,9 +452,11 @@ background: #374151; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #818cf8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #c7d2fe; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #c7d2fe; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #818cf8; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1019,6 +1059,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #a5b4fc; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1466,6 +1543,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #c7d2fe; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #c7d2fe; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1833,6 +1930,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #818cf8; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #818cf8; background: transparent; @@ -2430,6 +2538,7 @@ color: #818cf8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -2787,6 +2913,7 @@ background: rgba(129, 140, 248, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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(129, 140, 248, 0.2); @@ -2932,12 +3059,12 @@ background: #818cf8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3165,6 +3297,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3278,6 +3421,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3483,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3397,20 +3542,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3482,6 +3637,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #818cf8; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3562,11 +3719,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #818cf8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #a5b4fc; color: #030712; @@ -4442,6 +4617,7 @@ color: #030712; border-color: #c7d2fe; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4520,7 +4697,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4787,7 +4967,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4884,7 +5065,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5214,7 +5397,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5450,7 +5636,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #818cf8; color: #030712; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #818cf8; color: #030712; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6065,25 +6271,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #818cf8; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #818cf8; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(129, 140, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6105,37 +6318,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #818cf8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #818cf8; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #818cf8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #818cf8; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(129, 140, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #818cf8; color: #030712; diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 0f9ac9e3281..4f80c8978d5 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -439,9 +452,11 @@ background: #374151; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #a78bfa; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #ddd6fe; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ddd6fe; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a78bfa; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1019,6 +1059,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c4b5fd; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1466,6 +1543,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #ddd6fe; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ddd6fe; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1833,6 +1930,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #a78bfa; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #a78bfa; background: transparent; @@ -2430,6 +2538,7 @@ color: #a78bfa; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -2787,6 +2913,7 @@ background: rgba(167, 139, 250, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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(167, 139, 250, 0.2); @@ -2932,12 +3059,12 @@ background: #a78bfa; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3165,6 +3297,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3278,6 +3421,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3483,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3397,20 +3542,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3482,6 +3637,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #a78bfa; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3562,11 +3719,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #a78bfa; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #c4b5fd; color: #030712; @@ -4442,6 +4617,7 @@ color: #030712; border-color: #ddd6fe; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4520,7 +4697,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4787,7 +4967,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4884,7 +5065,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5214,7 +5397,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5450,7 +5636,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #a78bfa; color: #030712; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #a78bfa; color: #030712; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6065,25 +6271,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #a78bfa; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #a78bfa; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(167, 139, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6105,37 +6318,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #a78bfa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #a78bfa; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #a78bfa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #a78bfa; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(167, 139, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #a78bfa; color: #030712; diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 1b98cb16397..55747605fb4 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -439,9 +452,11 @@ background: #374151; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #2dd4bf; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #99f6e4; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #99f6e4; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2dd4bf; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1019,6 +1059,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #5eead4; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1466,6 +1543,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #99f6e4; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #99f6e4; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1833,6 +1930,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #2dd4bf; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #2dd4bf; background: transparent; @@ -2430,6 +2538,7 @@ color: #2dd4bf; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -2787,6 +2913,7 @@ background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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(45, 212, 191, 0.2); @@ -2932,12 +3059,12 @@ background: #2dd4bf; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3165,6 +3297,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3278,6 +3421,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3483,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3397,20 +3542,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3482,6 +3637,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #2dd4bf; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3562,11 +3719,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #2dd4bf; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #5eead4; color: #030712; @@ -4442,6 +4617,7 @@ color: #030712; border-color: #99f6e4; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4520,7 +4697,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4787,7 +4967,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4884,7 +5065,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5214,7 +5397,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5450,7 +5636,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #2dd4bf; color: #030712; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #2dd4bf; color: #030712; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6065,25 +6271,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #2dd4bf; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #2dd4bf; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(45, 212, 191, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6105,37 +6318,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #2dd4bf; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #2dd4bf; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #2dd4bf; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #2dd4bf; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(45, 212, 191, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #2dd4bf; color: #030712; diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 68249111d73..2a614397bcb 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -439,9 +452,11 @@ background: #ffffff; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: #3B82F6; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #3B82F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #1D4ED8; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1D4ED8; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3B82F6; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1019,6 +1059,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #2563eb; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: #3B82F6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1466,6 +1543,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #1D4ED8; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1D4ED8; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1833,6 +1930,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #3B82F6; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #1D4ED8; background: transparent; @@ -2430,6 +2538,7 @@ color: #1D4ED8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -2787,6 +2913,7 @@ background: #EFF6FF; color: #1D4ED8; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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; @@ -2932,12 +3059,12 @@ background: #3B82F6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3165,6 +3297,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + border-color: #3B82F6; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3278,6 +3421,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3338,9 +3483,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3397,20 +3542,30 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + border-color: #3B82F6; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3482,6 +3637,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #3B82F6; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3562,11 +3719,11 @@ color: #1D4ED8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #1D4ED8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #1D4ED8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #3B82F6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #2563eb; color: #ffffff; @@ -4442,6 +4617,7 @@ color: #ffffff; border-color: #1D4ED8; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4520,7 +4697,7 @@ color: #1D4ED8; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: #1D4ED8; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4787,7 +4967,7 @@ color: #1D4ED8; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4884,7 +5065,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: #1D4ED8; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: #1D4ED8; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5214,7 +5397,7 @@ color: #1D4ED8; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #BFDBFE; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5450,7 +5636,7 @@ color: #1D4ED8; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #3B82F6; color: #ffffff; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #3B82F6; color: #ffffff; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6065,65 +6271,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #3B82F6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #3B82F6; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #3B82F6; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3B82F6; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #3B82F6; color: #ffffff; diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index df28f026f55..ad91f6aac15 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -439,9 +452,11 @@ background: #ffffff; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; border-color: #6366F1; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #6366F1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #4338CA; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4338CA; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #6366F1; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1019,6 +1059,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4F46E5; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; border-color: #6366F1; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1466,6 +1543,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #4338CA; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4338CA; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1833,6 +1930,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #6366F1; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #4338CA; background: transparent; @@ -2430,6 +2538,7 @@ color: #4338CA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -2787,6 +2913,7 @@ background: #EEF2FF; color: #4338CA; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #C7D2FE; @@ -2932,12 +3059,12 @@ background: #6366F1; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3165,6 +3297,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + border-color: #6366F1; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3278,6 +3421,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3338,9 +3483,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3397,20 +3542,30 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + border-color: #6366F1; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3482,6 +3637,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #6366F1; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3562,11 +3719,11 @@ color: #4338CA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #4338CA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #4338CA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #6366F1; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4F46E5; color: #ffffff; @@ -4442,6 +4617,7 @@ color: #ffffff; border-color: #4338CA; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4520,7 +4697,7 @@ color: #4338CA; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: #4338CA; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4787,7 +4967,7 @@ color: #4338CA; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4884,7 +5065,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: #4338CA; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: #4338CA; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5214,7 +5397,7 @@ color: #4338CA; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #C7D2FE; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5450,7 +5636,7 @@ color: #4338CA; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #6366F1; color: #ffffff; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #6366F1; color: #ffffff; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6065,65 +6271,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #6366F1; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #6366F1; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #6366F1; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #6366F1; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #6366F1; color: #ffffff; diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index b4beb5f6b7a..8012307229b 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -439,9 +452,11 @@ background: #ffffff; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; border-color: #8B5CF6; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #8B5CF6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #6D28D9; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #6D28D9; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #8B5CF6; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1019,6 +1059,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #7C3AED; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; border-color: #8B5CF6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1466,6 +1543,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #6D28D9; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #6D28D9; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1833,6 +1930,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #8B5CF6; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #6D28D9; background: transparent; @@ -2430,6 +2538,7 @@ color: #6D28D9; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -2787,6 +2913,7 @@ background: #F5F3FF; color: #6D28D9; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #DDD6FE; @@ -2932,12 +3059,12 @@ background: #8B5CF6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3165,6 +3297,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + border-color: #8B5CF6; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3278,6 +3421,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3338,9 +3483,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3397,20 +3542,30 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + border-color: #8B5CF6; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3482,6 +3637,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #8B5CF6; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3562,11 +3719,11 @@ color: #6D28D9; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #6D28D9; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #6D28D9; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #8B5CF6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #7C3AED; color: #ffffff; @@ -4442,6 +4617,7 @@ color: #ffffff; border-color: #6D28D9; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4520,7 +4697,7 @@ color: #6D28D9; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: #6D28D9; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4787,7 +4967,7 @@ color: #6D28D9; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4884,7 +5065,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: #6D28D9; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: #6D28D9; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5214,7 +5397,7 @@ color: #6D28D9; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #DDD6FE; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5450,7 +5636,7 @@ color: #6D28D9; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #8B5CF6; color: #ffffff; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #8B5CF6; color: #ffffff; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6065,65 +6271,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #8B5CF6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #8B5CF6; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #8B5CF6; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #8B5CF6; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #8B5CF6; color: #ffffff; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 0c8314288c6..26f44a2af8a 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -439,9 +452,11 @@ background: #ffffff; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -449,19 +464,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -488,7 +507,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -498,13 +517,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -513,14 +532,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #14b8a6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -669,6 +688,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -676,10 +696,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -722,6 +744,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -761,6 +784,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -770,9 +794,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -780,6 +806,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -788,6 +815,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -828,9 +856,11 @@ background: #0f766e; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -843,12 +873,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0f766e; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #14b8a6; } @@ -887,9 +920,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -897,22 +932,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -956,6 +995,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1019,6 +1059,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1031,9 +1072,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1046,60 +1089,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1107,9 +1158,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1117,12 +1170,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1161,9 +1216,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d9488; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1196,45 +1253,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1244,14 +1313,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1326,9 +1398,11 @@ box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1368,9 +1442,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1378,6 +1454,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1466,6 +1543,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1475,12 +1553,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1502,6 +1583,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1509,6 +1591,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1516,6 +1599,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1553,9 +1637,11 @@ background: #0f766e; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1568,9 +1654,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0f766e; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1601,6 +1689,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1608,7 +1697,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1617,7 +1706,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1626,7 +1715,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1635,12 +1724,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1692,6 +1783,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1699,7 +1791,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1708,7 +1800,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1717,7 +1809,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1726,12 +1818,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1768,12 +1862,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1833,6 +1930,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1842,6 +1940,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1849,6 +1948,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #14b8a6; @@ -1960,7 +2060,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1987,6 +2087,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1999,414 +2100,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #0f766e; background: transparent; @@ -2430,6 +2538,7 @@ color: #0f766e; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2441,14 +2550,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2459,45 +2571,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2575,6 +2694,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2603,6 +2723,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2631,6 +2752,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2659,6 +2781,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2687,6 +2810,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2715,6 +2839,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2743,8 +2868,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2755,13 +2881,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -2787,6 +2913,7 @@ background: #f0fdfa; color: #0f766e; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2880,9 +3007,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2892,17 +3019,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #99f6e4; @@ -2932,12 +3059,12 @@ background: #14b8a6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3040,6 +3167,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3078,10 +3206,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3109,6 +3239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3128,6 +3259,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3165,6 +3297,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3193,20 +3326,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3225,14 +3368,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3270,6 +3412,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3278,6 +3421,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3316,6 +3460,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3325,9 +3470,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3338,9 +3483,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3397,20 +3542,30 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3429,14 +3584,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3474,6 +3628,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3482,6 +3637,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #14b8a6; border-radius: 50%; @@ -3493,19 +3649,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3562,11 +3719,11 @@ color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3639,6 +3796,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3778,7 +3936,7 @@ background: #14b8a6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3839,6 +3997,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3863,6 +4022,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3911,6 +4071,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3936,6 +4097,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3959,6 +4121,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3999,6 +4162,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4065,6 +4229,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4075,6 +4240,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4096,6 +4262,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4164,6 +4331,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4174,6 +4342,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4221,6 +4390,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4293,6 +4463,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4334,6 +4505,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4344,7 +4516,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4354,13 +4526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -4374,6 +4546,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4393,6 +4566,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4432,6 +4606,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0d9488; color: #ffffff; @@ -4442,6 +4617,7 @@ color: #ffffff; border-color: #0f766e; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4473,6 +4649,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4520,7 +4697,7 @@ color: #0f766e; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4534,7 +4711,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4545,7 +4722,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4559,6 +4736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4582,31 +4760,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4665,7 +4844,7 @@ color: #0f766e; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4679,7 +4858,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4690,7 +4869,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4748,9 +4927,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4787,7 +4967,7 @@ color: #0f766e; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4801,7 +4981,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4812,7 +4992,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4846,6 +5026,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4884,7 +5065,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4915,7 +5096,7 @@ color: #0f766e; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4929,7 +5110,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4940,7 +5121,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4957,6 +5138,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5131,7 +5313,7 @@ color: #0f766e; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5145,7 +5327,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5156,7 +5338,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5172,6 +5354,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5214,7 +5397,7 @@ color: #0f766e; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5228,7 +5411,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5239,7 +5422,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5286,6 +5469,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5330,6 +5514,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5400,6 +5585,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #99f6e4; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5450,7 +5636,7 @@ color: #0f766e; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5464,7 +5650,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5475,7 +5661,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5489,6 +5675,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5544,6 +5731,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5632,6 +5820,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5682,7 +5871,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5692,7 +5881,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5702,7 +5891,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5712,9 +5901,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5745,7 +5935,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5802,7 +5992,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5812,7 +6002,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5821,23 +6011,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5861,6 +6057,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5881,9 +6078,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #14b8a6; color: #ffffff; @@ -5925,6 +6124,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5960,6 +6160,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5974,6 +6175,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5989,6 +6191,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6010,6 +6213,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6017,6 +6221,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #14b8a6; color: #ffffff; @@ -6049,6 +6254,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6065,65 +6271,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #14b8a6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #14b8a6; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #14b8a6; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #14b8a6; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #14b8a6; color: #ffffff; diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 8117d1b1caa..ff395aeac19 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -422,9 +435,11 @@ background: #191919; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -471,23 +490,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFE082; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +581,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #FFCA28; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #FFCA28; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFE082; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -883,22 +919,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1005,6 +1046,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1093,9 +1145,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1103,12 +1157,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #FFD54F; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1354,9 +1429,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1364,6 +1441,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1394,7 +1472,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1452,6 +1530,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1495,6 +1578,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1502,6 +1586,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #FFCA28; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #FFCA28; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1600,7 +1692,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1691,7 +1786,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1760,12 +1857,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1801,7 +1901,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1825,6 +1925,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1841,6 +1943,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #FFE082; @@ -1952,7 +2055,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #FFE082; background: transparent; @@ -2422,6 +2533,7 @@ color: #FFE082; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2735,11 +2863,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2779,6 +2908,7 @@ background: #FFE082; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2872,29 +3002,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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.1rem white; @@ -2924,12 +3054,12 @@ background: #FFE082; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3070,14 +3201,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3101,10 +3234,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3157,6 +3292,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #FFE082; + } .p-orderlist .p-orderlist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3217,14 +3363,13 @@ color: #888888; } .p-orderlist .p-orderlist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3270,6 +3416,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3317,9 +3465,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3389,20 +3537,30 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #FFE082; + } .p-picklist .p-picklist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3421,14 +3579,13 @@ color: #888888; } .p-picklist .p-picklist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3474,6 +3632,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3523,7 +3683,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3554,11 +3714,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3718,7 +3879,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3770,7 +3931,7 @@ background: #FFE082; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3903,6 +4066,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3928,6 +4092,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3951,6 +4116,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3991,6 +4157,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4005,7 +4172,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4057,6 +4224,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4067,6 +4235,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4088,6 +4257,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4156,6 +4326,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4166,6 +4337,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4213,6 +4385,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4233,7 +4406,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4285,6 +4458,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4326,6 +4500,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4336,23 +4511,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4366,6 +4541,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4385,6 +4561,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4424,6 +4601,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #FFD54F; color: #212529; @@ -4434,6 +4612,7 @@ color: #212529; border-color: #FFCA28; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4465,6 +4644,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4512,7 +4692,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4526,7 +4706,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4537,7 +4717,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4551,6 +4731,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4574,31 +4755,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4657,7 +4839,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4671,7 +4853,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4682,7 +4864,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4740,9 +4922,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4779,7 +4962,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4793,7 +4976,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4804,7 +4987,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4838,6 +5021,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4876,7 +5060,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4907,7 +5091,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4921,7 +5105,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4932,7 +5116,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4949,6 +5133,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5123,7 +5308,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5137,7 +5322,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5148,7 +5333,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5164,6 +5349,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5206,7 +5392,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5220,7 +5406,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5231,7 +5417,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5278,6 +5464,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5322,6 +5509,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5392,6 +5580,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5442,7 +5631,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5456,7 +5645,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5467,7 +5656,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5481,6 +5670,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5536,6 +5726,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5624,6 +5815,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5674,7 +5866,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5684,7 +5876,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5694,7 +5886,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5704,9 +5896,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5737,7 +5930,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5794,7 +5987,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5804,7 +5997,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5813,23 +6006,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5853,6 +6052,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5873,9 +6073,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #FFE082; color: #212529; @@ -5917,6 +6119,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5952,6 +6155,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5966,6 +6170,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -5981,6 +6186,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6002,6 +6208,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6009,6 +6216,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFE082; color: #212529; @@ -6041,6 +6249,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 8f5aa713cf2..effe6df4678 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -422,9 +435,11 @@ background: #191919; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -471,23 +490,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #81D4FA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +581,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #29B6F6; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #29B6F6; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81D4FA; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -883,22 +919,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1005,6 +1046,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1093,9 +1145,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1103,12 +1157,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4FC3F7; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1354,9 +1429,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1364,6 +1441,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1394,7 +1472,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1452,6 +1530,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1495,6 +1578,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1502,6 +1586,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #29B6F6; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #29B6F6; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1600,7 +1692,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1691,7 +1786,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1760,12 +1857,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1801,7 +1901,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1825,6 +1925,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1841,6 +1943,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #81D4FA; @@ -1952,7 +2055,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #81D4FA; background: transparent; @@ -2422,6 +2533,7 @@ color: #81D4FA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2735,11 +2863,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2779,6 +2908,7 @@ background: #81D4FA; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2872,29 +3002,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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.1rem white; @@ -2924,12 +3054,12 @@ background: #81D4FA; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3070,14 +3201,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3101,10 +3234,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3157,6 +3292,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81D4FA; + } .p-orderlist .p-orderlist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3217,14 +3363,13 @@ color: #888888; } .p-orderlist .p-orderlist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3270,6 +3416,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3317,9 +3465,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3389,20 +3537,30 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81D4FA; + } .p-picklist .p-picklist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3421,14 +3579,13 @@ color: #888888; } .p-picklist .p-picklist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3474,6 +3632,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3523,7 +3683,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3554,11 +3714,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3718,7 +3879,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3770,7 +3931,7 @@ background: #81D4FA; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3903,6 +4066,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3928,6 +4092,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3951,6 +4116,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3991,6 +4157,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4005,7 +4172,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4057,6 +4224,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4067,6 +4235,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4088,6 +4257,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4156,6 +4326,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4166,6 +4337,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4213,6 +4385,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4233,7 +4406,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4285,6 +4458,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4326,6 +4500,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4336,23 +4511,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4366,6 +4541,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4385,6 +4561,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4424,6 +4601,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4FC3F7; color: #212529; @@ -4434,6 +4612,7 @@ color: #212529; border-color: #29B6F6; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4465,6 +4644,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4512,7 +4692,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4526,7 +4706,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4537,7 +4717,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4551,6 +4731,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4574,31 +4755,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4657,7 +4839,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4671,7 +4853,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4682,7 +4864,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4740,9 +4922,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4779,7 +4962,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4793,7 +4976,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4804,7 +4987,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4838,6 +5021,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4876,7 +5060,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4907,7 +5091,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4921,7 +5105,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4932,7 +5116,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4949,6 +5133,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5123,7 +5308,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5137,7 +5322,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5148,7 +5333,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5164,6 +5349,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5206,7 +5392,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5220,7 +5406,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5231,7 +5417,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5278,6 +5464,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5322,6 +5509,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5392,6 +5580,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5442,7 +5631,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5456,7 +5645,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5467,7 +5656,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5481,6 +5670,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5536,6 +5726,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5624,6 +5815,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5674,7 +5866,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5684,7 +5876,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5694,7 +5886,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5704,9 +5896,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5737,7 +5930,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5794,7 +5987,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5804,7 +5997,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5813,23 +6006,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5853,6 +6052,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5873,9 +6073,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #81D4FA; color: #212529; @@ -5917,6 +6119,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5952,6 +6155,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5966,6 +6170,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -5981,6 +6186,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6002,6 +6208,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6009,6 +6216,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #81D4FA; color: #212529; @@ -6041,6 +6249,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 9905e5aa3d7..27df1631db0 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -422,9 +435,11 @@ background: #191919; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -471,23 +490,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #C5E1A5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +581,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #9CCC65; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9CCC65; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #C5E1A5; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -883,22 +919,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1005,6 +1046,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1093,9 +1145,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1103,12 +1157,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #AED581; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1354,9 +1429,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1364,6 +1441,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1394,7 +1472,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1452,6 +1530,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1495,6 +1578,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1502,6 +1586,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #9CCC65; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9CCC65; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1600,7 +1692,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1691,7 +1786,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1760,12 +1857,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1801,7 +1901,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1825,6 +1925,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1841,6 +1943,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #C5E1A5; @@ -1952,7 +2055,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #C5E1A5; background: transparent; @@ -2422,6 +2533,7 @@ color: #C5E1A5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2735,11 +2863,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2779,6 +2908,7 @@ background: #C5E1A5; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2872,29 +3002,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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.1rem white; @@ -2924,12 +3054,12 @@ background: #C5E1A5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3070,14 +3201,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3101,10 +3234,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3157,6 +3292,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #C5E1A5; + } .p-orderlist .p-orderlist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3217,14 +3363,13 @@ color: #888888; } .p-orderlist .p-orderlist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3270,6 +3416,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3317,9 +3465,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3389,20 +3537,30 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #C5E1A5; + } .p-picklist .p-picklist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3421,14 +3579,13 @@ color: #888888; } .p-picklist .p-picklist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3474,6 +3632,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3523,7 +3683,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3554,11 +3714,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3718,7 +3879,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3770,7 +3931,7 @@ background: #C5E1A5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3903,6 +4066,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3928,6 +4092,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3951,6 +4116,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3991,6 +4157,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4005,7 +4172,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4057,6 +4224,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4067,6 +4235,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4088,6 +4257,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4156,6 +4326,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4166,6 +4337,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4213,6 +4385,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4233,7 +4406,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4285,6 +4458,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4326,6 +4500,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4336,23 +4511,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4366,6 +4541,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4385,6 +4561,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4424,6 +4601,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #AED581; color: #212529; @@ -4434,6 +4612,7 @@ color: #212529; border-color: #9CCC65; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4465,6 +4644,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4512,7 +4692,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4526,7 +4706,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4537,7 +4717,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4551,6 +4731,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4574,31 +4755,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4657,7 +4839,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4671,7 +4853,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4682,7 +4864,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4740,9 +4922,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4779,7 +4962,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4793,7 +4976,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4804,7 +4987,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4838,6 +5021,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4876,7 +5060,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4907,7 +5091,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4921,7 +5105,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4932,7 +5116,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4949,6 +5133,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5123,7 +5308,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5137,7 +5322,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5148,7 +5333,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5164,6 +5349,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5206,7 +5392,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5220,7 +5406,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5231,7 +5417,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5278,6 +5464,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5322,6 +5509,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5392,6 +5580,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5442,7 +5631,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5456,7 +5645,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5467,7 +5656,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5481,6 +5670,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5536,6 +5726,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5624,6 +5815,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5674,7 +5866,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5684,7 +5876,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5694,7 +5886,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5704,9 +5896,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5737,7 +5930,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5794,7 +5987,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5804,7 +5997,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5813,23 +6006,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5853,6 +6052,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5873,9 +6073,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #C5E1A5; color: #212529; @@ -5917,6 +6119,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5952,6 +6155,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5966,6 +6170,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -5981,6 +6186,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6002,6 +6208,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6009,6 +6216,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #C5E1A5; color: #212529; @@ -6041,6 +6249,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 26373abadc4..78502545ae1 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -422,9 +435,11 @@ background: #191919; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -471,23 +490,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #F48FB1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +581,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #EC407A; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #EC407A; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #F48FB1; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -883,22 +919,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1005,6 +1046,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1093,9 +1145,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1103,12 +1157,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #F06292; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1354,9 +1429,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1364,6 +1441,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1394,7 +1472,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1452,6 +1530,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1495,6 +1578,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1502,6 +1586,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #EC407A; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #EC407A; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1600,7 +1692,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1691,7 +1786,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1760,12 +1857,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1801,7 +1901,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1825,6 +1925,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1841,6 +1943,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #F48FB1; @@ -1952,7 +2055,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #F48FB1; background: transparent; @@ -2422,6 +2533,7 @@ color: #F48FB1; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2735,11 +2863,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2779,6 +2908,7 @@ background: #F48FB1; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2872,29 +3002,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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.1rem white; @@ -2924,12 +3054,12 @@ background: #F48FB1; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3070,14 +3201,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3101,10 +3234,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3157,6 +3292,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #F48FB1; + } .p-orderlist .p-orderlist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3217,14 +3363,13 @@ color: #888888; } .p-orderlist .p-orderlist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3270,6 +3416,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3317,9 +3465,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3389,20 +3537,30 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #323232; + border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #F48FB1; + } .p-picklist .p-picklist-header { - background: #191919; color: #dedede; - border: 1px solid #191919; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3421,14 +3579,13 @@ color: #888888; } .p-picklist .p-picklist-list { - border: 1px solid #191919; - background: #323232; color: #dedede; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3474,6 +3632,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3523,7 +3683,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3554,11 +3714,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3718,7 +3879,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3770,7 +3931,7 @@ background: #F48FB1; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3903,6 +4066,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3928,6 +4092,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3951,6 +4116,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3991,6 +4157,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4005,7 +4172,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4057,6 +4224,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4067,6 +4235,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4088,6 +4257,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4156,6 +4326,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4166,6 +4337,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4213,6 +4385,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4233,7 +4406,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4285,6 +4458,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4326,6 +4500,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4336,23 +4511,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4366,6 +4541,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4385,6 +4561,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4424,6 +4601,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #F06292; color: #212529; @@ -4434,6 +4612,7 @@ color: #212529; border-color: #EC407A; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4465,6 +4644,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4512,7 +4692,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4526,7 +4706,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4537,7 +4717,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4551,6 +4731,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4574,31 +4755,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4657,7 +4839,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4671,7 +4853,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4682,7 +4864,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4740,9 +4922,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4779,7 +4962,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4793,7 +4976,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4804,7 +4987,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4838,6 +5021,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4876,7 +5060,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4907,7 +5091,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4921,7 +5105,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4932,7 +5116,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4949,6 +5133,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5123,7 +5308,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5137,7 +5322,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5148,7 +5333,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5164,6 +5349,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5206,7 +5392,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5220,7 +5406,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5231,7 +5417,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5278,6 +5464,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5322,6 +5509,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5392,6 +5580,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5442,7 +5631,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5456,7 +5645,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5467,7 +5656,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5481,6 +5670,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5536,6 +5726,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5624,6 +5815,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5674,7 +5866,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5684,7 +5876,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5694,7 +5886,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5704,9 +5896,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5737,7 +5930,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5794,7 +5987,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5804,7 +5997,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5813,23 +6006,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5853,6 +6052,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5873,9 +6073,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #F48FB1; color: #212529; @@ -5917,6 +6119,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5952,6 +6155,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5966,6 +6170,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -5981,6 +6186,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6002,6 +6208,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6009,6 +6216,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #F48FB1; color: #212529; @@ -6041,6 +6249,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index 78efd55759d..7c8b1b6e8ba 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -442,9 +458,11 @@ background: transparent; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -452,24 +470,28 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -486,12 +508,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #CE93D8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -570,13 +592,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -635,7 +657,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -679,10 +702,12 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -690,7 +715,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -752,11 +778,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 1rem 1rem; @@ -764,18 +790,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -783,6 +812,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,12 +821,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -831,27 +862,32 @@ background: #CE93D8; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #CE93D8; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -868,12 +904,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -900,25 +938,29 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -968,7 +1011,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1004,11 +1047,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1022,87 +1065,98 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1110,9 +1164,11 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1120,18 +1176,20 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1153,7 +1211,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1174,7 +1234,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1199,72 +1259,87 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1317,11 +1392,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1329,12 +1404,14 @@ box-shadow: none; border-color: #CE93D8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1357,7 +1434,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1381,6 +1460,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1390,7 +1470,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1448,11 +1528,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1469,21 +1549,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1512,6 +1597,7 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1519,12 +1605,13 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1556,14 +1643,16 @@ background: #121212; color: #CE93D8; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,14 +1730,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,15 +1824,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1760,7 +1857,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1786,7 +1886,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1836,15 +1936,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1852,6 +1954,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #121212; background: #CE93D8; @@ -1963,7 +2066,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #A5D6A7; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(165, 214, 167, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(165, 214, 167, 0.16); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #A5D6A7; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); border-color: transparent; color: #A5D6A7; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(165, 214, 167, 0.16); border-color: transparent; color: #A5D6A7; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -2433,6 +2544,7 @@ color: #CE93D8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(165, 214, 167, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #A5D6A7; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #A5D6A7; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(206, 147, 216, 0.16); color: #CE93D8; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #CE93D8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3157,7 +3292,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3165,12 +3300,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3179,7 +3315,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3245,12 +3390,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3264,15 +3409,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,8 +3427,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3449,12 +3606,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3468,15 +3625,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3565,19 +3725,19 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3634,7 +3794,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #CE93D8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3971,7 +4136,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3981,11 +4146,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4110,10 +4279,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4121,8 +4290,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4371,7 +4546,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(206, 147, 216, 0.92); color: #121212; @@ -4469,6 +4647,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4547,7 +4727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,13 +4735,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,11 +4752,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,13 +4882,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4740,7 +4922,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4775,9 +4957,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4814,7 +4997,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,13 +5005,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4857,7 +5040,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4911,7 +5095,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,13 +5134,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4978,12 +5162,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5015,7 +5200,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5158,7 +5343,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,13 +5351,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,14 +5368,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5265,7 +5451,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5273,13 +5459,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5305,7 +5491,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5373,7 +5560,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5501,7 +5690,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5509,13 +5698,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,11 +5715,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,8 +6111,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #CE93D8; color: #121212; @@ -5976,8 +6178,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #CE93D8; color: #121212; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6151,15 +6360,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6169,13 +6380,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(165, 214, 167, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(165, 214, 167, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } @@ -6368,8 +6590,9 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6428,7 +6652,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6451,12 +6676,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6466,13 +6692,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,15 +6743,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-cascadeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6534,13 +6763,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6585,27 +6815,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #A5D6A7; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,12 +6896,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6676,13 +6912,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #CE93D8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #CE93D8; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,15 +6987,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-dropdown-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6763,13 +7007,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,30 +7051,32 @@ background: rgba(165, 214, 167, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6840,12 +7088,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #CE93D8; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -6992,12 +7257,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7007,13 +7273,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,27 +7406,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7204,12 +7484,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,15 +7608,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-treeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7338,13 +7628,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7451,6 +7749,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(165, 214, 167, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index 77575db3fec..f56ef34e0f7 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -442,9 +458,11 @@ background: transparent; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -452,24 +470,28 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -486,12 +508,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9FA8DA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -570,13 +592,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -635,7 +657,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -679,10 +702,12 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -690,7 +715,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -752,11 +778,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 1rem 1rem; @@ -764,18 +790,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -783,6 +812,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,12 +821,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -831,27 +862,32 @@ background: #9FA8DA; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -868,12 +904,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -900,25 +938,29 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -968,7 +1011,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1004,11 +1047,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1022,87 +1065,98 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1110,9 +1164,11 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1120,18 +1176,20 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1153,7 +1211,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1174,7 +1234,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1199,72 +1259,87 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1317,11 +1392,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1329,12 +1404,14 @@ box-shadow: none; border-color: #9FA8DA; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1357,7 +1434,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1381,6 +1460,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1390,7 +1470,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1448,11 +1528,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1469,21 +1549,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1512,6 +1597,7 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1519,12 +1605,13 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1556,14 +1643,16 @@ background: #121212; color: #9FA8DA; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,14 +1730,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,15 +1824,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1760,7 +1857,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1786,7 +1886,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1836,15 +1936,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1852,6 +1954,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #121212; background: #9FA8DA; @@ -1963,7 +2066,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #F48FB1; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(244, 143, 177, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #F48FB1; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -2433,6 +2544,7 @@ color: #9FA8DA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(244, 143, 177, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #F48FB1; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #F48FB1; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(159, 168, 218, 0.16); color: #9FA8DA; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #9FA8DA; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3157,7 +3292,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3165,12 +3300,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3179,7 +3315,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3245,12 +3390,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3264,15 +3409,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,8 +3427,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3449,12 +3606,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3468,15 +3625,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3565,19 +3725,19 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3634,7 +3794,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #9FA8DA; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3971,7 +4136,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3981,11 +4146,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4110,10 +4279,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4121,8 +4290,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4371,7 +4546,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(159, 168, 218, 0.92); color: #121212; @@ -4469,6 +4647,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4547,7 +4727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,13 +4735,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,11 +4752,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,13 +4882,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4740,7 +4922,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4775,9 +4957,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4814,7 +4997,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,13 +5005,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4857,7 +5040,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4911,7 +5095,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,13 +5134,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4978,12 +5162,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5015,7 +5200,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5158,7 +5343,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,13 +5351,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,14 +5368,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5265,7 +5451,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5273,13 +5459,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5305,7 +5491,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5373,7 +5560,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5501,7 +5690,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5509,13 +5698,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,11 +5715,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,8 +6111,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #9FA8DA; color: #121212; @@ -5976,8 +6178,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #9FA8DA; color: #121212; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6151,15 +6360,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6169,13 +6380,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(244, 143, 177, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(244, 143, 177, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } @@ -6368,8 +6590,9 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6428,7 +6652,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6451,12 +6676,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6466,13 +6692,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,15 +6743,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-cascadeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6534,13 +6763,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6585,27 +6815,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #F48FB1; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,12 +6896,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6676,13 +6912,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9FA8DA; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #9FA8DA; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,15 +6987,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-dropdown-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6763,13 +7007,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,30 +7051,32 @@ background: rgba(244, 143, 177, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6840,12 +7088,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #9FA8DA; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -6992,12 +7257,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7007,13 +7273,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,27 +7406,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7204,12 +7484,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,15 +7608,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-treeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7338,13 +7628,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7451,6 +7749,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(159, 168, 218, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(244, 143, 177, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index f1e8e4d7442..0a2ae7725e7 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -442,9 +458,11 @@ background: #ffffff; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -452,19 +470,23 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -491,7 +513,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +584,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #673AB7; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -679,10 +702,12 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -764,6 +790,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -773,9 +800,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -783,6 +812,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,6 +821,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -831,9 +862,11 @@ background: #673AB7; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -846,12 +879,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #673AB7; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -900,22 +938,26 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1022,6 +1065,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1034,9 +1078,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1049,60 +1095,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1110,9 +1164,11 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1120,12 +1176,14 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1199,45 +1259,57 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1247,14 +1319,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1329,9 +1404,11 @@ box-shadow: none; border-color: #673AB7; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1381,6 +1460,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1469,6 +1549,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1478,12 +1559,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1512,6 +1597,7 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1519,6 +1605,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1556,9 +1643,11 @@ background: #ffffff; color: #673AB7; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,12 +1730,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,12 +1824,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1836,6 +1936,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1845,6 +1946,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1852,6 +1954,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-button { color: #ffffff; background: #673AB7; @@ -1963,7 +2066,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); border-color: transparent; color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(76, 175, 80, 0.16); border-color: transparent; color: #4CAF50; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #673AB7; background: transparent; @@ -2433,6 +2544,7 @@ color: #673AB7; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(76, 175, 80, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #4CAF50; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #4CAF50; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(103, 58, 183, 0.12); color: #673AB7; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #673AB7; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3168,6 +3303,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(0, 0, 0, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3273,6 +3418,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,6 +3427,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(0, 0, 0, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3477,6 +3634,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3565,11 +3725,11 @@ color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #673AB7; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3986,6 +4151,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4123,6 +4292,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4371,7 +4546,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(103, 58, 183, 0.92); color: #ffffff; @@ -4469,6 +4647,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4547,7 +4727,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4561,7 +4741,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4752,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4888,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4775,9 +4957,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4814,7 +4997,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4828,7 +5011,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: transparent; @@ -4911,7 +5095,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4956,7 +5140,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -4984,6 +5168,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5158,7 +5343,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5172,7 +5357,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,7 +5368,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5265,7 +5451,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5279,7 +5465,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5501,7 +5690,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5515,7 +5704,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,7 +5715,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,6 +6111,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #673AB7; color: #ffffff; @@ -5976,6 +6178,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #673AB7; color: #ffffff; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6151,9 +6360,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(76, 175, 80, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(76, 175, 80, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } @@ -6368,6 +6590,7 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6451,6 +6676,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,9 +6743,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-cascadeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6585,13 +6815,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #4CAF50; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,6 +6896,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #673AB7; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,9 +6987,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-dropdown-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,12 +7051,14 @@ background: rgba(76, 175, 80, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6840,6 +7088,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #673AB7; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -6992,6 +7257,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,18 +7406,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7204,12 +7484,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,9 +7608,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-treeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7451,6 +7749,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(103, 58, 183, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 480d263999e..8d3b8685860 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -442,9 +458,11 @@ background: #ffffff; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -452,19 +470,23 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -491,7 +513,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #3F51B5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +584,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #3F51B5; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -679,10 +702,12 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -764,6 +790,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -773,9 +800,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -783,6 +812,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,6 +821,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -831,9 +862,11 @@ background: #3F51B5; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -846,12 +879,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -900,22 +938,26 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1022,6 +1065,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1034,9 +1078,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1049,60 +1095,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1110,9 +1164,11 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1120,12 +1176,14 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1199,45 +1259,57 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1247,14 +1319,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1329,9 +1404,11 @@ box-shadow: none; border-color: #3F51B5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1381,6 +1460,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1469,6 +1549,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1478,12 +1559,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1512,6 +1597,7 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1519,6 +1605,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1556,9 +1643,11 @@ background: #ffffff; color: #3F51B5; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,12 +1730,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,12 +1824,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1836,6 +1936,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1845,6 +1946,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1852,6 +1954,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-button { color: #ffffff; background: #3F51B5; @@ -1963,7 +2066,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #ff4081; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(255, 64, 129, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 64, 129, 0.16); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #ff4081; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); border-color: transparent; color: #ff4081; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 64, 129, 0.16); border-color: transparent; color: #ff4081; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -2433,6 +2544,7 @@ color: #3F51B5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(255, 64, 129, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #ff4081; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #ff4081; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(63, 81, 181, 0.12); color: #3F51B5; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #3F51B5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3168,6 +3303,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(0, 0, 0, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3273,6 +3418,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,6 +3427,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(0, 0, 0, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3477,6 +3634,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3565,11 +3725,11 @@ color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #3F51B5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3986,6 +4151,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4123,6 +4292,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4371,7 +4546,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(63, 81, 181, 0.92); color: #ffffff; @@ -4469,6 +4647,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4547,7 +4727,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4561,7 +4741,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4752,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4888,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4775,9 +4957,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4814,7 +4997,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4828,7 +5011,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: transparent; @@ -4911,7 +5095,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4956,7 +5140,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -4984,6 +5168,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5158,7 +5343,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5172,7 +5357,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,7 +5368,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5265,7 +5451,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5279,7 +5465,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5501,7 +5690,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5515,7 +5704,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,7 +5715,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,6 +6111,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5976,6 +6178,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #3F51B5; color: #ffffff; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6151,9 +6360,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(255, 64, 129, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 64, 129, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } @@ -6368,6 +6590,7 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6451,6 +6676,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,9 +6743,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-cascadeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6585,13 +6815,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #ff4081; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,6 +6896,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #3F51B5; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3F51B5; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,9 +6987,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-dropdown-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,12 +7051,14 @@ background: rgba(255, 64, 129, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6840,6 +7088,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #3F51B5; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -6992,6 +7257,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,18 +7406,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7204,12 +7484,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,9 +7608,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-treeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7451,6 +7749,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(63, 81, 181, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 64, 129, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 8746357a52c..fca93a15833 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -442,9 +458,11 @@ background: transparent; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -452,24 +470,28 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -486,12 +508,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #CE93D8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -570,13 +592,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -635,7 +657,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -679,10 +702,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -690,7 +715,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -752,11 +778,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 0.75rem 0.75rem; @@ -764,18 +790,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -783,6 +812,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,12 +821,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -831,27 +862,32 @@ background: #CE93D8; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #CE93D8; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -868,12 +904,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -900,25 +938,29 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -968,7 +1011,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1004,11 +1047,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1022,87 +1065,98 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0.75rem 0.75rem; min-width: 2.75rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1110,9 +1164,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1120,18 +1176,20 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1153,7 +1211,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1174,7 +1234,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1199,72 +1259,87 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1317,11 +1392,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1329,12 +1404,14 @@ box-shadow: none; border-color: #CE93D8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1357,7 +1434,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1381,6 +1460,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1390,7 +1470,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1448,11 +1528,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1469,21 +1549,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 0.75rem; background: #1e1e1e; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1512,6 +1597,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1519,12 +1605,13 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1556,14 +1643,16 @@ background: #121212; color: #CE93D8; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,14 +1730,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,15 +1824,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1760,7 +1857,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1786,7 +1886,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1836,15 +1936,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1852,6 +1954,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-button { color: #121212; background: #CE93D8; @@ -1963,7 +2066,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #A5D6A7; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(165, 214, 167, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(165, 214, 167, 0.16); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #A5D6A7; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); border-color: transparent; color: #A5D6A7; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(165, 214, 167, 0.16); border-color: transparent; color: #A5D6A7; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -2433,6 +2544,7 @@ color: #CE93D8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(165, 214, 167, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #A5D6A7; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #A5D6A7; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(206, 147, 216, 0.16); color: #CE93D8; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #CE93D8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3157,7 +3292,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3165,12 +3300,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3179,7 +3315,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3245,12 +3390,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3264,15 +3409,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,8 +3427,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3449,12 +3606,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3468,15 +3625,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3565,19 +3725,19 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3634,7 +3794,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #CE93D8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3971,7 +4136,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3981,11 +4146,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4110,10 +4279,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4121,8 +4290,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4371,7 +4546,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(206, 147, 216, 0.92); color: #121212; @@ -4469,6 +4647,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4547,7 +4727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,13 +4735,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,11 +4752,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,13 +4882,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4740,7 +4922,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4775,9 +4957,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4814,7 +4997,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,13 +5005,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4857,7 +5040,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4911,7 +5095,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,13 +5134,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4978,12 +5162,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5015,7 +5200,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5158,7 +5343,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,13 +5351,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,14 +5368,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5265,7 +5451,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5273,13 +5459,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5305,7 +5491,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5373,7 +5560,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5501,7 +5690,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5509,13 +5698,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,11 +5715,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,8 +6111,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #CE93D8; color: #121212; @@ -5976,8 +6178,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #CE93D8; color: #121212; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6151,15 +6360,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6169,13 +6380,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(165, 214, 167, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(165, 214, 167, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } @@ -6368,8 +6590,9 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6428,7 +6652,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6451,12 +6676,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6466,13 +6692,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,15 +6743,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-cascadeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6534,13 +6763,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6585,27 +6815,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #A5D6A7; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,12 +6896,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6676,13 +6912,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #CE93D8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #CE93D8; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,15 +6987,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-dropdown-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6763,13 +7007,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,30 +7051,32 @@ background: rgba(165, 214, 167, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6840,12 +7088,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #CE93D8; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -6992,12 +7257,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7007,13 +7273,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,27 +7406,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7204,12 +7484,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,15 +7608,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-treeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7338,13 +7628,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7451,6 +7749,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(165, 214, 167, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 3ea889a3907..1a2b60a9c66 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -442,9 +458,11 @@ background: transparent; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -452,24 +470,28 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -486,12 +508,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9FA8DA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -570,13 +592,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -635,7 +657,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -679,10 +702,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -690,7 +715,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -752,11 +778,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 0.75rem 0.75rem; @@ -764,18 +790,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -783,6 +812,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,12 +821,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -831,27 +862,32 @@ background: #9FA8DA; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -868,12 +904,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -900,25 +938,29 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -968,7 +1011,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1004,11 +1047,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1022,87 +1065,98 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0.75rem 0.75rem; min-width: 2.75rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1110,9 +1164,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1120,18 +1176,20 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1153,7 +1211,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1174,7 +1234,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1199,72 +1259,87 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1317,11 +1392,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1329,12 +1404,14 @@ box-shadow: none; border-color: #9FA8DA; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1357,7 +1434,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1381,6 +1460,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1390,7 +1470,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1448,11 +1528,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1469,21 +1549,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 0.75rem; background: #1e1e1e; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1512,6 +1597,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1519,12 +1605,13 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1556,14 +1643,16 @@ background: #121212; color: #9FA8DA; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,14 +1730,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,15 +1824,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1760,7 +1857,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1786,7 +1886,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1836,15 +1936,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1852,6 +1954,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-button { color: #121212; background: #9FA8DA; @@ -1963,7 +2066,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #F48FB1; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(244, 143, 177, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #F48FB1; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -2433,6 +2544,7 @@ color: #9FA8DA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(244, 143, 177, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #F48FB1; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #F48FB1; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(159, 168, 218, 0.16); color: #9FA8DA; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #9FA8DA; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3157,7 +3292,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3165,12 +3300,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3179,7 +3315,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3245,12 +3390,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3264,15 +3409,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,8 +3427,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid rgba(255, 255, 255, 0.12); - background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3449,12 +3606,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3468,15 +3625,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3565,19 +3725,19 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3634,7 +3794,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #9FA8DA; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3971,7 +4136,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3981,11 +4146,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4110,10 +4279,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4121,8 +4290,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4371,7 +4546,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(159, 168, 218, 0.92); color: #121212; @@ -4469,6 +4647,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4547,7 +4727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,13 +4735,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,11 +4752,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,13 +4882,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4740,7 +4922,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4775,9 +4957,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4814,7 +4997,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,13 +5005,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4857,7 +5040,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4911,7 +5095,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,13 +5134,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4978,12 +5162,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5015,7 +5200,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5158,7 +5343,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,13 +5351,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,14 +5368,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5265,7 +5451,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5273,13 +5459,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5305,7 +5491,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5373,7 +5560,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5501,7 +5690,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5509,13 +5698,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,11 +5715,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,8 +6111,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #9FA8DA; color: #121212; @@ -5976,8 +6178,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #9FA8DA; color: #121212; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6151,15 +6360,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6169,13 +6380,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(244, 143, 177, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(244, 143, 177, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } @@ -6368,8 +6590,9 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6428,7 +6652,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6451,12 +6676,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6466,13 +6692,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,15 +6743,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-cascadeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6534,13 +6763,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6585,27 +6815,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #F48FB1; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,12 +6896,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6676,13 +6912,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9FA8DA; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #9FA8DA; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,15 +6987,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-dropdown-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6763,13 +7007,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,30 +7051,32 @@ background: rgba(244, 143, 177, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6840,12 +7088,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #9FA8DA; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -6992,12 +7257,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7007,13 +7273,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,27 +7406,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7204,12 +7484,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,15 +7608,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-treeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7338,13 +7628,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7451,6 +7749,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(159, 168, 218, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(244, 143, 177, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index d53a62d5e5d..c753ad87b59 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -442,9 +458,11 @@ background: #ffffff; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -452,19 +470,23 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -491,7 +513,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +584,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #673AB7; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -679,10 +702,12 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -764,6 +790,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -773,9 +800,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -783,6 +812,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,6 +821,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -831,9 +862,11 @@ background: #673AB7; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -846,12 +879,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #673AB7; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -900,22 +938,26 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1022,6 +1065,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1034,9 +1078,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1049,60 +1095,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1110,9 +1164,11 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1120,12 +1176,14 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1199,45 +1259,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1247,14 +1319,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1329,9 +1404,11 @@ box-shadow: none; border-color: #673AB7; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1381,6 +1460,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1469,6 +1549,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1478,12 +1559,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 0.75rem; background: #ffffff; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1512,6 +1597,7 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1519,6 +1605,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1556,9 +1643,11 @@ background: #ffffff; color: #673AB7; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,12 +1730,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,12 +1824,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1836,6 +1936,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1845,6 +1946,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1852,6 +1954,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-button { color: #ffffff; background: #673AB7; @@ -1963,7 +2066,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); border-color: transparent; color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(76, 175, 80, 0.16); border-color: transparent; color: #4CAF50; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #673AB7; background: transparent; @@ -2433,6 +2544,7 @@ color: #673AB7; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(76, 175, 80, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #4CAF50; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #4CAF50; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(103, 58, 183, 0.12); color: #673AB7; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #673AB7; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3168,6 +3303,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(0, 0, 0, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3273,6 +3418,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,6 +3427,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(0, 0, 0, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3477,6 +3634,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3565,11 +3725,11 @@ color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #673AB7; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3986,6 +4151,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4123,6 +4292,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4371,7 +4546,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(103, 58, 183, 0.92); color: #ffffff; @@ -4469,6 +4647,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4547,7 +4727,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4561,7 +4741,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4752,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4888,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4775,9 +4957,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4814,7 +4997,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4828,7 +5011,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4911,7 +5095,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4956,7 +5140,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -4984,6 +5168,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5158,7 +5343,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5172,7 +5357,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,7 +5368,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5265,7 +5451,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5279,7 +5465,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5501,7 +5690,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5515,7 +5704,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,7 +5715,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,6 +6111,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #673AB7; color: #ffffff; @@ -5976,6 +6178,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #673AB7; color: #ffffff; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6151,9 +6360,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(76, 175, 80, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(76, 175, 80, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } @@ -6368,6 +6590,7 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6451,6 +6676,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,9 +6743,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-cascadeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6585,13 +6815,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #4CAF50; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,6 +6896,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #673AB7; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,9 +6987,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-dropdown-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,12 +7051,14 @@ background: rgba(76, 175, 80, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6840,6 +7088,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #673AB7; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -6992,6 +7257,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,18 +7406,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7204,12 +7484,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,9 +7608,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-treeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7451,6 +7749,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(103, 58, 183, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index bbd244b6ec9..9fb19f1780a 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; box-shadow: none; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -442,9 +458,11 @@ background: #ffffff; font-weight: 400; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -452,19 +470,23 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -491,7 +513,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -501,13 +523,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -516,14 +538,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #3F51B5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -562,7 +584,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #3F51B5; @@ -672,6 +694,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -679,10 +702,12 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -725,6 +750,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -764,6 +790,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -773,9 +800,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -783,6 +812,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -791,6 +821,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -831,9 +862,11 @@ background: #3F51B5; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -846,12 +879,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -890,9 +926,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -900,22 +938,26 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -959,6 +1001,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1022,6 +1065,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1034,9 +1078,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1049,60 +1095,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1110,9 +1164,11 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1120,12 +1176,14 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1164,9 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1199,45 +1259,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1247,14 +1319,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1329,9 +1404,11 @@ box-shadow: none; border-color: #3F51B5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1371,9 +1448,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1381,6 +1460,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1469,6 +1549,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1478,12 +1559,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 0.75rem; background: #ffffff; @@ -1505,6 +1589,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1512,6 +1597,7 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1519,6 +1605,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1556,9 +1643,11 @@ background: #ffffff; color: #3F51B5; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1571,9 +1660,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1604,6 +1695,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1611,7 +1703,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1620,7 +1712,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1629,7 +1721,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1638,12 +1730,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1695,6 +1789,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1702,7 +1797,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1711,7 +1806,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1720,7 +1815,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1729,12 +1824,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1771,12 +1868,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1836,6 +1936,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1845,6 +1946,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1852,6 +1954,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-button { color: #ffffff; background: #3F51B5; @@ -1963,7 +2066,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1990,6 +2093,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2002,414 +2106,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #ff4081; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(255, 64, 129, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 64, 129, 0.16); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #ff4081; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); border-color: transparent; color: #ff4081; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 64, 129, 0.16); border-color: transparent; color: #ff4081; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -2433,6 +2544,7 @@ color: #3F51B5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2444,14 +2556,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2462,45 +2577,52 @@ background: rgba(255, 64, 129, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2578,6 +2700,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #ff4081; @@ -2606,6 +2729,7 @@ border-color: transparent; color: #ff4081; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2634,6 +2758,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2662,6 +2787,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2690,6 +2816,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2718,6 +2845,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2746,8 +2874,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2758,13 +2887,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2790,6 +2919,7 @@ background: rgba(63, 81, 181, 0.12); color: #3F51B5; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2883,9 +3013,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2895,17 +3025,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2935,12 +3065,12 @@ background: #3F51B5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3043,6 +3173,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3081,10 +3212,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3112,6 +3245,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3131,6 +3265,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3168,6 +3303,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3196,20 +3332,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 500; @@ -3228,14 +3374,13 @@ color: rgba(0, 0, 0, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3273,6 +3418,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3281,6 +3427,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3319,6 +3466,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3328,9 +3476,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3341,9 +3489,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3400,20 +3548,30 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 500; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 500; @@ -3432,14 +3590,13 @@ color: rgba(0, 0, 0, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3477,6 +3634,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3485,6 +3643,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3496,19 +3655,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3565,11 +3725,11 @@ color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3642,6 +3802,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3781,7 +3942,7 @@ background: #3F51B5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3842,6 +4003,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3866,6 +4028,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3938,6 +4101,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3963,6 +4127,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3986,6 +4151,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4026,6 +4192,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -4092,6 +4259,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4102,6 +4270,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4123,6 +4292,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4191,6 +4361,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4201,6 +4372,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4248,6 +4420,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4320,6 +4493,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4361,6 +4535,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4371,7 +4546,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -4381,13 +4556,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4401,6 +4576,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4420,6 +4596,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4459,6 +4636,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(63, 81, 181, 0.92); color: #ffffff; @@ -4469,6 +4647,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4500,6 +4679,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4547,7 +4727,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4561,7 +4741,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4752,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4586,6 +4766,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4609,31 +4790,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4692,7 +4874,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4888,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4717,7 +4899,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4775,9 +4957,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4814,7 +4997,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4828,7 +5011,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4839,7 +5022,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4873,6 +5056,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4911,7 +5095,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4956,7 +5140,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4967,7 +5151,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -4984,6 +5168,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5158,7 +5343,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5172,7 +5357,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5183,7 +5368,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5223,6 +5408,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5265,7 +5451,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5279,7 +5465,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5290,7 +5476,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5337,6 +5523,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5381,6 +5568,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5451,6 +5639,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5501,7 +5690,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5515,7 +5704,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5526,7 +5715,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5540,6 +5729,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5595,6 +5785,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5683,6 +5874,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5733,7 +5925,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5743,7 +5935,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5753,7 +5945,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5763,9 +5955,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5796,7 +5989,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5853,7 +6046,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5863,7 +6056,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5872,23 +6065,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5912,6 +6111,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5932,9 +6132,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5976,6 +6178,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6011,6 +6214,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6025,6 +6229,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6040,6 +6245,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6061,6 +6267,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6068,6 +6275,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #3F51B5; color: #ffffff; @@ -6100,6 +6308,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6151,9 +6360,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6183,9 +6394,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6215,18 +6428,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6278,6 +6494,7 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(255, 64, 129, 0.76); } @@ -6293,6 +6510,7 @@ .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 64, 129, 0.16); } + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } @@ -6308,6 +6526,7 @@ .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } @@ -6323,6 +6542,7 @@ .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } @@ -6338,6 +6558,7 @@ .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } @@ -6353,6 +6574,7 @@ .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } @@ -6368,6 +6590,7 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6414,6 +6637,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6439,6 +6663,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6451,6 +6676,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6506,6 +6732,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6516,9 +6743,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-cascadeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6566,6 +6795,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6585,13 +6815,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #ff4081; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6633,12 +6866,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6661,6 +6896,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6690,9 +6926,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6714,9 +6952,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6729,12 +6969,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #3F51B5; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3F51B5; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6745,9 +6987,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-dropdown-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6791,9 +7035,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6805,12 +7051,14 @@ background: rgba(255, 64, 129, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6840,6 +7088,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6854,24 +7103,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6880,9 +7131,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6891,6 +7144,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6907,45 +7161,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #3F51B5; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -6955,21 +7215,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6980,6 +7244,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -6992,6 +7257,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7025,11 +7291,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7058,18 +7326,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7079,13 +7351,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7097,6 +7370,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7132,18 +7406,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7169,12 +7446,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7196,6 +7475,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7204,12 +7484,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7220,6 +7502,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7272,6 +7555,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7294,9 +7578,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7304,12 +7590,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7320,9 +7608,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-treeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7356,11 +7646,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7389,9 +7681,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7401,6 +7695,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7413,6 +7708,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7437,12 +7733,14 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7451,6 +7749,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(63, 81, 181, 0.12); } @@ -7482,45 +7781,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 64, 129, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index f9172e8c707..28cb7ef3127 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -52,25 +52,29 @@ font-family: "Inter"; font-style: normal; font-weight: 400; - src: local("Inter"), local("Inter-Regular"), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter"), local("Inter-Regular"), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; - src: local("Inter Medium"), local("Inter-Medium"), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter Medium"), local("Inter-Medium"), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; - src: local("Inter SemiBold"), local("Inter-SemiBold"), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter SemiBold"), local("Inter-SemiBold"), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; - src: local("Inter Bold"), local("Inter-Bold"), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter Bold"), local("Inter-Bold"), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f7f9fb; @@ -298,32 +302,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(112, 120, 136, 0.5); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #bf616a; } + .p-text-secondary { color: #81a1c1; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -335,12 +347,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -357,6 +372,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -403,6 +419,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } + .p-autocomplete-panel { background: #ffffff; color: #4c566a; @@ -444,9 +461,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #bf616a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -454,19 +473,23 @@ color: #81a1c1; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #81a1c1; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #bf616a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -493,7 +516,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #81a1c1; @@ -503,13 +526,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -518,14 +541,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4c566a; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #5e81ac; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +697,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -681,10 +705,12 @@ color: #81a1c1; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #81a1c1; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +753,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #bf616a; } + .p-cascadeselect-panel { background: #ffffff; color: #4c566a; @@ -766,6 +793,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #eceff4; } @@ -775,9 +803,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #bf616a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -785,6 +815,7 @@ color: #81a1c1; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +824,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -833,9 +865,11 @@ background: #81a1c1; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #bf616a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #eceff4; } @@ -848,12 +882,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #81a1c1; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #bf616a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81a1c1; } @@ -892,9 +929,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #bf616a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -902,22 +941,26 @@ color: #81a1c1; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #d8dee9; @@ -961,6 +1004,7 @@ .p-dropdown.p-invalid.p-component { border-color: #bf616a; } + .p-dropdown-panel { background: #ffffff; color: #4c566a; @@ -1024,6 +1068,7 @@ color: #4c566a; background: transparent; } + .p-input-filled .p-dropdown { background: #eceff4; } @@ -1036,9 +1081,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #bf616a; } + .p-inputgroup-addon { background: #ffffff; color: #81a1c1; @@ -1051,60 +1098,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d8dee9; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #bf616a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1112,9 +1167,11 @@ color: #81a1c1; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #bf616a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1122,12 +1179,14 @@ color: #81a1c1; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1225,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #81a1c1; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #bf616a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1262,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #4c566a; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #bf616a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #81a1c1; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #81a1c1; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #4c566a; } + :-moz-placeholder { color: #4c566a; } + ::-moz-placeholder { color: #4c566a; } + :-ms-input-placeholder { color: #4c566a; } + .p-input-filled .p-inputtext { background-color: #eceff4; } @@ -1249,14 +1322,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #4c566a; @@ -1331,9 +1407,11 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #bf616a; } + .p-multiselect { background: #ffffff; border: 1px solid #d8dee9; @@ -1373,9 +1451,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1383,6 +1463,7 @@ color: #81a1c1; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #4c566a; @@ -1471,6 +1552,7 @@ color: #4c566a; background: transparent; } + .p-input-filled .p-multiselect { background: #eceff4; } @@ -1480,12 +1562,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #bf616a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #bf616a; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1507,6 +1592,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #7fa366; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1514,6 +1600,7 @@ color: #81a1c1; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1521,6 +1608,7 @@ color: #81a1c1; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1558,9 +1646,11 @@ background: #81a1c1; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #bf616a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #eceff4; } @@ -1573,9 +1663,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #81a1c1; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1698,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #d88889; } + .p-selectbutton .p-button { background: #ffffff; border: 2px solid #d8dee9; @@ -1613,7 +1706,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #81a1c1; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1715,7 @@ color: #4c566a; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #81a1c1; } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1724,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1733,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #bf616a; } + .p-slider { background: #e5e9f0; border: 0 none; @@ -1697,6 +1792,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 2px solid #d8dee9; @@ -1704,7 +1800,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #81a1c1; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1809,7 @@ color: #4c566a; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #81a1c1; } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1818,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1827,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #bf616a; } + .p-treeselect { background: #ffffff; border: 1px solid #d8dee9; @@ -1773,12 +1871,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #bf616a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #4c566a; @@ -1838,6 +1939,7 @@ color: #4c566a; background: transparent; } + .p-input-filled .p-treeselect { background: #eceff4; } @@ -1847,6 +1949,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1854,6 +1957,7 @@ color: #81a1c1; right: 2.357rem; } + .p-button { color: #ffffff; background: #5e81ac; @@ -1965,7 +2069,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,6 +2096,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2004,414 +2109,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4c566a; border: 2px solid #4c566a; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #707888; color: #ffffff; border-color: #4c566a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b3bac8; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #2e3440; color: #ffffff; border-color: #2e3440; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #4c566a; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(76, 86, 106, 0.12); color: #4c566a; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 86, 106, 0.24); color: #4c566a; border: 2px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #4c566a; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(76, 86, 106, 0.12); border-color: transparent; color: #4c566a; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(76, 86, 106, 0.24); border-color: transparent; color: #4c566a; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #639bb2; border: 2px solid #639bb2; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #88c0d0; color: #ffffff; border-color: #639bb2; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c1d7e0; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #497e94; color: #ffffff; border-color: #497e94; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #639bb2; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(99, 155, 178, 0.12); color: #639bb2; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(99, 155, 178, 0.24); color: #639bb2; border: 2px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #639bb2; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(99, 155, 178, 0.12); border-color: transparent; color: #639bb2; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(99, 155, 178, 0.24); border-color: transparent; color: #639bb2; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #7fa366; border: 2px solid #7fa366; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #a3be8c; color: #ffffff; border-color: #7fa366; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ccdac2; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #658450; color: #ffffff; border-color: #658450; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #7fa366; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(127, 163, 102, 0.12); color: #7fa366; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(127, 163, 102, 0.24); color: #7fa366; border: 2px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #7fa366; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(127, 163, 102, 0.12); border-color: transparent; color: #7fa366; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(127, 163, 102, 0.24); border-color: transparent; color: #7fa366; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #d08770; border: 2px solid #d08770; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #e2ac94; color: #ffffff; border-color: #d08770; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #eccfc6; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c05f40; color: #ffffff; border-color: #c05f40; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #d08770; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(208, 135, 112, 0.12); color: #d08770; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(208, 135, 112, 0.24); color: #d08770; border: 2px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #d08770; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(208, 135, 112, 0.12); border-color: transparent; color: #d08770; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(208, 135, 112, 0.24); border-color: transparent; color: #d08770; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9a6796; border: 2px solid #9a6796; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #b48ead; color: #ffffff; border-color: #9a6796; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d7c2d5; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7c5278; color: #ffffff; border-color: #7c5278; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9a6796; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(154, 103, 150, 0.12); color: #9a6796; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(154, 103, 150, 0.24); color: #9a6796; border: 2px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9a6796; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(154, 103, 150, 0.12); border-color: transparent; color: #9a6796; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(154, 103, 150, 0.24); border-color: transparent; color: #9a6796; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #bf616a; border: 2px solid #bf616a; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #d88889; color: #ffffff; border-color: #bf616a; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e5c0c3; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a4424c; color: #ffffff; border-color: #a4424c; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #bf616a; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(191, 97, 106, 0.12); color: #bf616a; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(191, 97, 106, 0.24); color: #bf616a; border: 2px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #bf616a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(191, 97, 106, 0.12); border-color: transparent; color: #bf616a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(191, 97, 106, 0.24); border-color: transparent; color: #bf616a; } + .p-button.p-button-link { color: #48678c; background: transparent; @@ -2435,6 +2547,7 @@ color: #48678c; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2559,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2580,52 @@ background: #3b4252; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(112, 120, 136, 0.5); } + .p-splitbutton { border-radius: 4px; } @@ -2580,6 +2703,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #4c566a; @@ -2608,6 +2732,7 @@ border-color: transparent; color: #4c566a; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #639bb2; @@ -2636,6 +2761,7 @@ border-color: transparent; color: #639bb2; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #7fa366; @@ -2664,6 +2790,7 @@ border-color: transparent; color: #7fa366; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #d08770; @@ -2692,6 +2819,7 @@ border-color: transparent; color: #d08770; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9a6796; @@ -2720,6 +2848,7 @@ border-color: transparent; color: #9a6796; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #bf616a; @@ -2748,8 +2877,9 @@ border-color: transparent; color: #bf616a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #81a1c1; @@ -2760,13 +2890,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -2792,6 +2922,7 @@ background: #d8dee9; color: #2e3440; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2885,9 +3016,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #81a1c1; @@ -2897,17 +3028,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #c0d0e0; @@ -2937,12 +3068,12 @@ background: #5e81ac; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #eceff4; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3176,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3083,10 +3215,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3248,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3268,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-column-filter-overlay { background: #ffffff; color: #4c566a; @@ -3170,6 +3306,7 @@ border-top: 1px solid #e5e9f0; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3198,20 +3335,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: #4c566a; border: 1px solid #e5e9f0; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; + } + .p-orderlist .p-orderlist-header { + color: #4c566a; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3230,14 +3377,13 @@ color: #81a1c1; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e9f0; - background: #ffffff; color: #4c566a; padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e9f0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3275,6 +3421,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: transparent; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3283,6 +3430,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: transparent; color: #4c566a; @@ -3321,6 +3469,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-paginator { background: #ffffff; color: #4c566a; @@ -3330,9 +3479,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #4c566a; @@ -3343,9 +3492,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #eceff4; border-color: #5e81ac; color: #4c566a; @@ -3402,20 +3551,30 @@ border-color: #5e81ac; color: #4c566a; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: #4c566a; border: 1px solid #e5e9f0; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; + } + .p-picklist .p-picklist-header { + color: #4c566a; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3434,14 +3593,13 @@ color: #81a1c1; } .p-picklist .p-picklist-list { - border: 1px solid #e5e9f0; - background: #ffffff; color: #4c566a; padding: 0.5rem 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e9f0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3479,6 +3637,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: transparent; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3487,6 +3646,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3498,19 +3658,20 @@ background-color: #e5e9f0; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e9f0; background: #ffffff; @@ -3567,11 +3728,11 @@ color: #2e3440; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #2e3440; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #2e3440; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3644,6 +3805,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3783,7 +3945,7 @@ background: #5e81ac; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3844,6 +4006,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: #4c566a; @@ -3868,6 +4031,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #e5e9f0; @@ -3940,6 +4104,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: #4c566a; @@ -3965,6 +4130,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3988,6 +4154,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e9f0; background: #ffffff; @@ -4028,6 +4195,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #e5e9f0; padding: 1rem; @@ -4094,6 +4262,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #eceff4; border: 0 none; @@ -4104,6 +4273,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-splitter { border: 1px solid #e5e9f0; background: #ffffff; @@ -4125,6 +4295,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #c2c7d1; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4193,6 +4364,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e5e9f0; @@ -4203,6 +4375,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4c566a; @@ -4250,6 +4423,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4322,6 +4496,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4c566a; @@ -4363,6 +4538,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4c566a; @@ -4373,7 +4549,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #81a1c1; @@ -4383,13 +4559,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -4403,6 +4579,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #4c566a; color: #ffffff; @@ -4422,6 +4599,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c566a; } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4461,6 +4639,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #81a1c1; color: #ffffff; @@ -4471,6 +4650,7 @@ color: #ffffff; border-color: #48678c; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e9f0; @@ -4502,6 +4682,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #81a1c1; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4549,7 +4730,7 @@ color: #4c566a; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4563,7 +4744,7 @@ color: #4c566a; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4574,7 +4755,7 @@ color: #4c566a; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-contextmenu .p-menuitem-separator { @@ -4588,6 +4769,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4611,31 +4793,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4694,7 +4877,7 @@ color: #4c566a; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4708,7 +4891,7 @@ color: #4c566a; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4719,7 +4902,7 @@ color: #4c566a; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-megamenu .p-megamenu-panel { @@ -4777,9 +4960,10 @@ color: #4c566a; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4816,7 +5000,7 @@ color: #4c566a; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4830,7 +5014,7 @@ color: #4c566a; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4841,7 +5025,7 @@ color: #4c566a; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menu.p-menu-overlay { @@ -4875,6 +5059,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #eceff4; @@ -4913,7 +5098,7 @@ color: #4c566a; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4944,7 +5129,7 @@ color: #4c566a; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4958,7 +5143,7 @@ color: #4c566a; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4969,7 +5154,7 @@ color: #4c566a; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menubar .p-submenu-list { @@ -4986,6 +5171,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5160,7 +5346,7 @@ color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5174,7 +5360,7 @@ color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5185,7 +5371,7 @@ color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5225,6 +5411,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5267,7 +5454,7 @@ color: #4c566a; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5281,7 +5468,7 @@ color: #4c566a; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5292,7 +5479,7 @@ color: #4c566a; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-slidemenu.p-slidemenu-overlay { @@ -5339,6 +5526,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5383,6 +5571,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 2px solid #e5e9f0; @@ -5453,6 +5642,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #c0d0e0; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5503,7 +5693,7 @@ color: #4c566a; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5517,7 +5707,7 @@ color: #4c566a; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5528,7 +5718,7 @@ color: #4c566a; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-tieredmenu .p-menuitem-separator { @@ -5542,6 +5732,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5597,6 +5788,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5685,6 +5877,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5735,7 +5928,7 @@ color: #2e4f5d; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #17282e; } .p-toast .p-toast-message.p-toast-message-success { @@ -5745,7 +5938,7 @@ color: #202919; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #202919; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5755,7 +5948,7 @@ color: #3c1d14; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #3c1d14; } .p-toast .p-toast-message.p-toast-message-error { @@ -5765,9 +5958,10 @@ color: #331518; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #331518; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5798,7 +5992,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5855,7 +6049,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #eceff4; @@ -5865,7 +6059,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #eceff4; } @@ -5874,23 +6068,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5914,6 +6114,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e9f0; border-radius: 4px; @@ -5934,9 +6135,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #5e81ac; color: #ffffff; @@ -5978,6 +6181,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e9f0; color: #4c566a; @@ -6013,6 +6217,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 4px; @@ -6027,6 +6232,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6042,6 +6248,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6063,6 +6270,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e9f0; border-radius: 4px; @@ -6070,6 +6278,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #5e81ac; color: #ffffff; @@ -6102,6 +6311,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4c566a; @@ -6122,48 +6332,59 @@ .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-chips .p-chips-multiple-container:not(.p-disabled):hover { background-color: #eceff4; } .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-autocomplete .p-autocomplete-panel .p-autocomplete-item:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { background-color: #eceff4; } + .p-dropdown:not(.p-disabled):hover { background-color: #eceff4; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-multiselect:not(.p-disabled):hover { background-color: #eceff4; } + .p-button { font-weight: 500; } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { background-color: #d8dee9; } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { border-color: transparent; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #d8dee9; } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { border-color: transparent; } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover:not(.p-disabled) .p-accordion-header-link:focus { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6173,6 +6394,7 @@ .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-datepicker table td > span.p-highlight { color: #ffffff; background: #5e81ac; @@ -6185,33 +6407,40 @@ color: #ffffff; background: #5e81ac; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-menubar .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-menu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { border: 1px solid #5e81ac; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { border: 1px solid #5e81ac; } + .p-datatable .p-sortable-column:not(.p-highlight):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6224,18 +6453,22 @@ .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { outline: 1px solid #81a1c1; } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #81a1c1; color: #ffffff; border: 2px solid #51749e; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: #ffffff; box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-treetable .p-sortable-column:not(.p-highlight):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6253,12 +6486,14 @@ .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { outline: 1px solid #81a1c1; } + .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6268,17 +6503,21 @@ .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-slidemenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #5e81ac; color: #ffffff; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #5e81ac; color: #ffffff; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #5e81ac; } diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index 1561ad5049d..2233f23a87d 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #d8222f; } + .p-text-secondary { color: #697077; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.25rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } + .p-autocomplete-panel { background: #ffffff; color: #343a3f; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #d8222f; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.5rem; } @@ -432,19 +447,23 @@ color: #697077; right: 0.25rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #697077; right: 2.607rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #d8222f; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + .p-datepicker { padding: 0.25rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 1px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 1rem; height: 1rem; color: #878d96; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -496,14 +515,14 @@ line-height: 1rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #343a3f; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #1174c0; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.5rem; } @@ -659,10 +679,12 @@ color: #697077; right: 0.25rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #697077; right: 2.607rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #d8222f; } + .p-cascadeselect-panel { background: #ffffff; color: #343a3f; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f2f4f8; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #d8222f; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.25rem; } @@ -763,6 +789,7 @@ color: #697077; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 14px; height: 14px; @@ -811,9 +839,11 @@ background: #0e5d9a; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #d8222f; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f4f8; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0e5d9a; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #d8222f; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #1174c0; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #d8222f; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.25rem; } @@ -880,22 +915,26 @@ color: #697077; right: 0.25rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #a5acb3; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #d8222f; } + .p-dropdown-panel { background: #ffffff; color: #343a3f; @@ -1002,6 +1042,7 @@ color: #343a3f; background: transparent; } + .p-input-filled .p-dropdown { background: #f2f4f8; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #d8222f; } + .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a5acb3; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 1px; border-bottom-left-radius: 1px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 1px; border-bottom-left-radius: 1px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #d8222f; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.5rem; } @@ -1090,9 +1141,11 @@ color: #697077; right: 0.25rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #d8222f; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.5rem; } @@ -1100,12 +1153,14 @@ color: #697077; right: 0.25rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.607rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.607rem; } + .p-inputswitch { width: 2rem; height: 1.155rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0f68ad; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #d8222f; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .p-float-label > label { left: 0.25rem; color: #697077; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #d8222f; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.25rem; color: #697077; } + .p-input-icon-left > .p-inputtext { padding-left: 1.5rem; } + .p-input-icon-left.p-float-label > label { left: 1.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.25rem; color: #697077; } + .p-input-icon-right > .p-inputtext { padding-right: 1.5rem; } + ::-webkit-input-placeholder { color: #697077; } + :-moz-placeholder { color: #697077; } + ::-moz-placeholder { color: #697077; } + :-ms-input-placeholder { color: #697077; } + .p-input-filled .p-inputtext { background-color: #f2f4f8; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.21875rem 0.21875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .p-listbox { background: #ffffff; color: #343a3f; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #d8222f; } + .p-multiselect { background: #ffffff; border: 1px solid #a5acb3; @@ -1351,9 +1425,11 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.125rem 0.25rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.25rem; } @@ -1361,6 +1437,7 @@ color: #697077; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #343a3f; @@ -1449,6 +1526,7 @@ color: #343a3f; background: transparent; } + .p-input-filled .p-multiselect { background: #f2f4f8; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #d8222f; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #d8222f; } + .p-password-panel { padding: 0.5rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #207f3b; } + p-password.p-password-clearable .p-password-input { padding-right: 1.5rem; } @@ -1492,6 +1574,7 @@ color: #697077; right: 0.25rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 2.75rem; } @@ -1499,6 +1582,7 @@ color: #697077; right: 1.5rem; } + .p-radiobutton { width: 14px; height: 14px; @@ -1536,9 +1620,11 @@ background: #0e5d9a; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #d8222f; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f4f8; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e5d9a; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #a5acb3; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #697077; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #343a3f; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #697077; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #d8222f; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #a5acb3; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #697077; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #343a3f; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #697077; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #d8222f; } + .p-treeselect { background: #ffffff; border: 1px solid #a5acb3; @@ -1751,12 +1845,15 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #d8222f; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.125rem 0.25rem; } + .p-treeselect-panel { background: #ffffff; color: #343a3f; @@ -1816,6 +1913,7 @@ color: #343a3f; background: transparent; } + .p-input-filled .p-treeselect { background: #f2f4f8; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.25rem; } @@ -1832,6 +1931,7 @@ color: #697077; right: 2.357rem; } + .p-button { color: #ffffff; background: #1174c0; @@ -1943,7 +2043,7 @@ padding: 0.25rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #697077; border: 1px solid #697077; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5f656b; color: #ffffff; border-color: #5f656b; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2c6c9; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545a5f; color: #ffffff; border-color: #545a5f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #697077; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(105, 112, 119, 0.04); color: #697077; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(105, 112, 119, 0.16); color: #697077; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #697077; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(105, 112, 119, 0.04); border-color: transparent; color: #697077; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(105, 112, 119, 0.16); border-color: transparent; color: #697077; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #107d79; border: 1px solid #107d79; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0e716d; color: #ffffff; border-color: #0e716d; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #7ceeea; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0d6461; color: #ffffff; border-color: #0d6461; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #107d79; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(16, 125, 121, 0.04); color: #107d79; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(16, 125, 121, 0.16); color: #107d79; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #107d79; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(16, 125, 121, 0.04); border-color: transparent; color: #107d79; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(16, 125, 121, 0.16); border-color: transparent; color: #107d79; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #207f3b; border: 1px solid #207f3b; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #1d7235; color: #ffffff; border-color: #1d7235; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8fe3a7; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #1a662f; color: #ffffff; border-color: #1a662f; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #207f3b; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(32, 127, 59, 0.04); color: #207f3b; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(32, 127, 59, 0.16); color: #207f3b; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #207f3b; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(32, 127, 59, 0.04); border-color: transparent; color: #207f3b; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(32, 127, 59, 0.16); border-color: transparent; color: #207f3b; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #f0c135; border: 1px solid #f0c135; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #eeb91a; color: #212529; border-color: #eeb91a; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9e6ae; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #daa710; color: #212529; border-color: #daa710; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f0c135; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(240, 193, 53, 0.04); color: #f0c135; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(240, 193, 53, 0.16); color: #f0c135; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f0c135; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(240, 193, 53, 0.04); border-color: transparent; color: #f0c135; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(240, 193, 53, 0.16); border-color: transparent; color: #f0c135; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #8949f8; border: 1px solid #8949f8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #752af7; color: #ffffff; border-color: #752af7; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d0b6fc; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #610bf6; color: #ffffff; border-color: #610bf6; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #8949f8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(137, 73, 248, 0.04); color: #8949f8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(137, 73, 248, 0.16); color: #8949f8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #8949f8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(137, 73, 248, 0.04); border-color: transparent; color: #8949f8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(137, 73, 248, 0.16); border-color: transparent; color: #8949f8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d8222f; border: 1px solid #d8222f; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c21f2a; color: #ffffff; border-color: #c21f2a; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f1a5ab; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ad1b26; color: #ffffff; border-color: #ad1b26; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d8222f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(216, 34, 47, 0.04); color: #d8222f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(216, 34, 47, 0.16); color: #d8222f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d8222f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(216, 34, 47, 0.04); border-color: transparent; color: #d8222f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(216, 34, 47, 0.16); border-color: transparent; color: #d8222f; } + .p-button.p-button-link { color: #0e5d9a; background: transparent; @@ -2413,6 +2521,7 @@ color: #0e5d9a; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.75rem; height: 2.75rem; @@ -2424,14 +2533,17 @@ width: 1rem; height: 1rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-speeddial-action { width: 2.25rem; height: 2.25rem; @@ -2442,45 +2554,52 @@ background: #21272a; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 1px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #697077; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #697077; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #107d79; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #107d79; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #207f3b; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #207f3b; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f0c135; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #f0c135; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #8949f8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #8949f8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d8222f; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #d8222f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 1rem; height: 1rem; color: #878d96; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -2770,6 +2896,7 @@ background: #44a1d9; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 0.25rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 1rem; height: 1rem; color: #878d96; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #90c9f5; @@ -2915,12 +3042,12 @@ background: #1174c0; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f2f4f8; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f2f4f8; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.3125rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.5rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 1rem; height: 1rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-column-filter-clear-button { width: 1rem; height: 1rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-column-filter-overlay { background: #ffffff; color: #343a3f; @@ -3148,6 +3280,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.25rem 0.5rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.5rem; } + .p-orderlist .p-orderlist-controls { padding: 0.5rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } .p-orderlist .p-orderlist-header { - background: #f2f4f8; color: #343a3f; - border: 1px solid #dee2e6; padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 1px; - border-top-left-radius: 1px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: #697077; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #343a3f; padding: 0.25rem 0; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.25rem 0.5rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #dde1e6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.25rem 0.5rem; 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); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #dde1e6; color: #343a3f; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-paginator { background: #ffffff; color: #697077; @@ -3308,9 +3453,9 @@ border-radius: 1px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #697077; @@ -3321,9 +3466,9 @@ border-radius: 1px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #dde1e6; border-color: transparent; color: #343a3f; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #343a3f; } + .p-picklist .p-picklist-buttons { padding: 0.5rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } .p-picklist .p-picklist-header { - background: #f2f4f8; color: #343a3f; - border: 1px solid #dee2e6; padding: 0.75rem; - border-bottom: 0 none; - border-top-right-radius: 1px; - border-top-left-radius: 1px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: #697077; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #343a3f; padding: 0.25rem 0; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.25rem 0.5rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #dde1e6; } + .p-picklist-item.cdk-drag-preview { padding: 0.25rem 0.5rem; 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); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #1174c0; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f2f4f8; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.3125rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f2f4f8; color: #343a3f; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.75rem; border: 1px solid #dee2e6; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } + .p-card { background: #ffffff; color: #343a3f; @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 0.5rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 0.75rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f2f4f8; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } + .p-toolbar { background: #f2f4f8; border: 1px solid #dee2e6; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #343a3f; @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 1px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #343a3f; @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #343a3f; @@ -4351,7 +4523,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 1rem; height: 1rem; color: #878d96; @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: #343a3f; color: #ffffff; @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #343a3f; } + .p-fileupload .p-fileupload-buttonbar { background: #f2f4f8; padding: 0.75rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0f68ad; color: #ffffff; @@ -4449,6 +4624,7 @@ color: #ffffff; border-color: #0e5d9a; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #697077; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4527,7 +4704,7 @@ color: #343a3f; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: #343a3f; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: #343a3f; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: #343a3f; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: #343a3f; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: #343a3f; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: #343a3f; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4794,7 +4974,7 @@ color: #343a3f; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: #343a3f; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: #343a3f; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f2f4f8; @@ -4891,7 +5072,7 @@ color: #343a3f; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: #343a3f; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #343a3f; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: #343a3f; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5245,7 +5428,7 @@ color: #343a3f; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: #343a3f; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: #343a3f; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #90c9f5; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5481,7 +5667,7 @@ color: #343a3f; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: #343a3f; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: #343a3f; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.25rem 0.25rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 1px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #08576a; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #08576a; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #196310; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #196310; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #726203; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #726203; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #6f2205; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #6f2205; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f2f4f8; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f2f4f8; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 1px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #1174c0; color: #ffffff; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #343a3f; @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.25rem 0.25rem; border-radius: 1px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 2rem; height: 2rem; @@ -6041,6 +6244,7 @@ width: 1rem; height: 1rem; } + .p-skeleton { background-color: #dde1e6; border-radius: 1px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #1174c0; color: #ffffff; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #343a3f; diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 60aa77be7c9..3c0d21b721e 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #a80000; } + .p-text-secondary { color: #848484; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-autocomplete-panel { background: #ffffff; color: #333333; @@ -422,9 +435,11 @@ background: #f4f4f4; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a80000; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #848484; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #848484; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #333333; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #848484; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #848484; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect-panel { background: #ffffff; color: #333333; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a80000; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #848484; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #005b9f; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a80000; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -880,22 +915,26 @@ color: #848484; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown-panel { background: #ffffff; color: #333333; @@ -1002,6 +1042,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a80000; } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a6a6a6; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1090,9 +1141,11 @@ color: #848484; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1100,12 +1153,14 @@ color: #848484; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #666666; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a80000; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #666666; } + :-moz-placeholder { color: #666666; } + ::-moz-placeholder { color: #666666; } + :-ms-input-placeholder { color: #666666; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #333333; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a80000; } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1361,6 +1437,7 @@ color: #848484; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1449,6 +1526,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a80000; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a80000; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1492,6 +1574,7 @@ color: #848484; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1499,6 +1582,7 @@ color: #848484; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #005b9f; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-selectbutton .p-button { background: #dadada; border: 1px solid #dadada; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a80000; } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a80000; } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #333333; @@ -1816,6 +1913,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1832,6 +1931,7 @@ color: #848484; right: 2.357rem; } + .p-button { color: #ffffff; background: #007ad9; @@ -1943,7 +2043,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #546e7a; color: #ffffff; border-color: #546e7a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b0bec5; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #455a64; color: #ffffff; border-color: #455a64; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8dcdff; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #007ad9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34a835; border: 1px solid #34a835; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #107d11; color: #ffffff; border-color: #107d11; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #aae5aa; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #0c6b0d; color: #ffffff; border-color: #0c6b0d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 168, 53, 0.16); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #34a835; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34a835; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34a835; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ed990b; color: #333333; border-color: #ed990b; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffeab4; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d38b10; color: #333333; border-color: #d38b10; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffba01; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8e24aa; color: #ffffff; border-color: #8e24aa; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7b1fa2; color: #ffffff; border-color: #7b1fa2; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c01120; color: #ffffff; border-color: #c01120; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4ba; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a90000; color: #ffffff; border-color: #a90000; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e91224; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; } + .p-button.p-button-link { color: #005b9f; background: transparent; @@ -2413,6 +2521,7 @@ color: #005b9f; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #007ad9; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #007ad9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #34a835; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #34a835; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffba01; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffba01; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e91224; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #e91224; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2770,6 +2896,7 @@ background: #e02365; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #8dcdff; @@ -2915,12 +3042,12 @@ background: #007ad9; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #007ad9; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f4f4f4; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-overlay { background: #ffffff; color: #333333; @@ -3148,6 +3280,7 @@ border-top: 1px solid #d8dae2; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #eaeaea; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-orderlist .p-orderlist-header { - background: #007ad9; color: #ffffff; - border: 1px solid #007ad9; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3208,14 +3351,13 @@ color: #848484; } .p-orderlist .p-orderlist-list { - border: 1px solid #c8c8c8; - background: #ffffff; color: #333333; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #eaeaea; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #848484; @@ -3321,9 +3466,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #333333; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #333333; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-picklist .p-picklist-header { - background: #007ad9; color: #ffffff; - border: 1px solid #007ad9; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3412,14 +3567,13 @@ color: #848484; } .p-picklist .p-picklist-list { - border: 1px solid #c8c8c8; - background: #ffffff; color: #333333; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #eaeaea; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #007ad9; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #007ad9; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #007ad9; color: #ffffff; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #007ad9; @@ -3894,6 +4054,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #333333; @@ -3919,6 +4080,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3942,6 +4104,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3982,6 +4145,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #007ad9; padding: 0.857rem 1rem; @@ -4048,6 +4212,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4058,6 +4223,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -4079,6 +4245,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4147,6 +4314,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #007ad9; border: 1px solid #007ad9; @@ -4157,6 +4325,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -4204,6 +4373,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4276,6 +4446,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -4317,6 +4488,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #c8c8c8; } + .p-sidebar { background: #ffffff; color: #333333; @@ -4327,7 +4499,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4337,13 +4509,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -4357,6 +4529,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4376,6 +4549,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #333333; } + .p-fileupload .p-fileupload-buttonbar { background: #007ad9; padding: 0.857rem 1rem; @@ -4415,6 +4589,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #116fbf; color: #ffffff; @@ -4425,6 +4600,7 @@ color: #ffffff; border-color: #005b9f; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4456,6 +4632,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #333333; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4503,7 +4680,7 @@ color: #333333; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4517,7 +4694,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4528,7 +4705,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem-separator { @@ -4542,6 +4719,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4565,31 +4743,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4648,7 +4827,7 @@ color: #333333; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4662,7 +4841,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4673,7 +4852,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-megamenu-panel { @@ -4731,9 +4910,10 @@ color: #333333; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } + .p-menu { padding: 0; background: #ffffff; @@ -4770,7 +4950,7 @@ color: #333333; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4784,7 +4964,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4795,7 +4975,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu.p-menu-overlay { @@ -4829,6 +5009,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4867,7 +5048,7 @@ color: #333333; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4898,7 +5079,7 @@ color: #333333; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4912,7 +5093,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4923,7 +5104,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-submenu-list { @@ -4940,6 +5121,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5114,7 +5296,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5128,7 +5310,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5139,7 +5321,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5155,6 +5337,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5197,7 +5380,7 @@ color: #333333; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5211,7 +5394,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5222,7 +5405,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu.p-slidemenu-overlay { @@ -5269,6 +5452,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -5313,6 +5497,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5383,6 +5568,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #8dcdff; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5433,7 +5619,7 @@ color: #333333; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5447,7 +5633,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5458,7 +5644,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem-separator { @@ -5472,6 +5658,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5527,6 +5714,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5615,6 +5803,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5665,7 +5854,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5675,7 +5864,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5685,7 +5874,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5695,9 +5884,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5728,7 +5918,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5785,7 +5975,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5795,7 +5985,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5804,23 +5994,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5844,6 +6040,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5864,9 +6061,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007ad9; color: #ffffff; @@ -5908,6 +6107,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5943,6 +6143,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5957,6 +6158,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-progressbar { border: 0 none; height: 24px; @@ -5972,6 +6174,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5993,6 +6196,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -6000,6 +6204,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007ad9; color: #ffffff; @@ -6032,6 +6237,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #333333; @@ -6051,6 +6257,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #5ab7ff; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #ffffff; } diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index cac653202d7..4756eb0985e 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #a80000; } + .p-text-secondary { color: #848484; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-autocomplete-panel { background: #ffffff; color: #333333; @@ -422,9 +435,11 @@ background: #f4f4f4; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a80000; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #848484; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #848484; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #333333; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #848484; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #848484; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect-panel { background: #ffffff; color: #333333; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a80000; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #848484; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #005b9f; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a80000; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -883,22 +919,26 @@ color: #848484; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown-panel { background: #ffffff; color: #333333; @@ -1005,6 +1046,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a80000; } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a6a6a6; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1093,9 +1145,11 @@ color: #848484; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1103,12 +1157,14 @@ color: #848484; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #666666; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a80000; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #666666; } + :-moz-placeholder { color: #666666; } + ::-moz-placeholder { color: #666666; } + :-ms-input-placeholder { color: #666666; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #333333; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a80000; } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1354,9 +1429,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1364,6 +1441,7 @@ color: #848484; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1452,6 +1530,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a80000; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a80000; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1495,6 +1578,7 @@ color: #848484; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1502,6 +1586,7 @@ color: #848484; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #005b9f; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #dadada; border: 1px solid #dadada; @@ -1600,7 +1692,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a80000; } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; @@ -1691,7 +1786,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a80000; } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1760,12 +1857,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #333333; @@ -1825,6 +1925,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1841,6 +1943,7 @@ color: #848484; right: 2.357rem; } + .p-button { color: #ffffff; background: #007ad9; @@ -1952,7 +2055,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #546e7a; color: #ffffff; border-color: #546e7a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b0bec5; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #455a64; color: #ffffff; border-color: #455a64; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8dcdff; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #007ad9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34a835; border: 1px solid #34a835; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #107d11; color: #ffffff; border-color: #107d11; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #aae5aa; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #0c6b0d; color: #ffffff; border-color: #0c6b0d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 168, 53, 0.16); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #34a835; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34a835; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34a835; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ed990b; color: #333333; border-color: #ed990b; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffeab4; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d38b10; color: #333333; border-color: #d38b10; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffba01; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8e24aa; color: #ffffff; border-color: #8e24aa; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7b1fa2; color: #ffffff; border-color: #7b1fa2; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c01120; color: #ffffff; border-color: #c01120; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4ba; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a90000; color: #ffffff; border-color: #a90000; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e91224; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; } + .p-button.p-button-link { color: #005b9f; background: transparent; @@ -2422,6 +2533,7 @@ color: #005b9f; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #007ad9; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #007ad9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #34a835; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #34a835; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffba01; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffba01; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e91224; @@ -2735,8 +2863,9 @@ border-color: transparent; color: #e91224; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2779,6 +2908,7 @@ background: #007ad9; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2872,9 +3002,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2884,17 +3014,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #8dcdff; @@ -2924,12 +3054,12 @@ background: #007ad9; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #333333; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f4f4f4; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3070,10 +3201,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3101,6 +3234,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-overlay { background: #ffffff; color: #333333; @@ -3157,6 +3292,7 @@ border-top: 1px solid #d8dae2; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #eaeaea; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-orderlist .p-orderlist-header { - background: #333333; color: #ffffff; - border: 1px solid #333333; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3217,14 +3363,13 @@ color: #848484; } .p-orderlist .p-orderlist-list { - border: 1px solid #c8c8c8; - background: #ffffff; color: #333333; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #eaeaea; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3270,6 +3416,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3317,9 +3465,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #848484; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #333333; @@ -3389,20 +3537,30 @@ border-color: transparent; color: #333333; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-picklist .p-picklist-header { - background: #333333; color: #ffffff; - border: 1px solid #333333; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3421,14 +3579,13 @@ color: #848484; } .p-picklist .p-picklist-list { - border: 1px solid #c8c8c8; - background: #ffffff; color: #333333; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #eaeaea; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3474,6 +3632,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3554,11 +3714,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3770,7 +3931,7 @@ background: #007ad9; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #333333; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #333333; color: #ffffff; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #333333; @@ -3903,6 +4066,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #333333; @@ -3928,6 +4092,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3951,6 +4116,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3991,6 +4157,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #333333; padding: 0.857rem 1rem; @@ -4057,6 +4224,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4067,6 +4235,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -4088,6 +4257,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4156,6 +4326,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #333333; border: 1px solid #333333; @@ -4166,6 +4337,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -4213,6 +4385,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4285,6 +4458,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -4326,6 +4500,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #c8c8c8; } + .p-sidebar { background: #ffffff; color: #333333; @@ -4336,7 +4511,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4346,13 +4521,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -4366,6 +4541,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4385,6 +4561,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #333333; } + .p-fileupload .p-fileupload-buttonbar { background: #333333; padding: 0.857rem 1rem; @@ -4424,6 +4601,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #116fbf; color: #ffffff; @@ -4434,6 +4612,7 @@ color: #ffffff; border-color: #005b9f; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4465,6 +4644,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #333333; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4512,7 +4692,7 @@ color: #333333; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4526,7 +4706,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4537,7 +4717,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem-separator { @@ -4551,6 +4731,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4574,31 +4755,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4657,7 +4839,7 @@ color: #333333; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4671,7 +4853,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4682,7 +4864,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-megamenu-panel { @@ -4740,9 +4922,10 @@ color: #333333; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } + .p-menu { padding: 0; background: #ffffff; @@ -4779,7 +4962,7 @@ color: #333333; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4793,7 +4976,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4804,7 +4987,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu.p-menu-overlay { @@ -4838,6 +5021,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4876,7 +5060,7 @@ color: #333333; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4907,7 +5091,7 @@ color: #333333; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4921,7 +5105,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4932,7 +5116,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-submenu-list { @@ -4949,6 +5133,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5123,7 +5308,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5137,7 +5322,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5148,7 +5333,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5164,6 +5349,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5206,7 +5392,7 @@ color: #333333; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5220,7 +5406,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5231,7 +5417,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu.p-slidemenu-overlay { @@ -5278,6 +5464,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -5322,6 +5509,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5392,6 +5580,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #8dcdff; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5442,7 +5631,7 @@ color: #333333; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5456,7 +5645,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5467,7 +5656,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem-separator { @@ -5481,6 +5670,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5536,6 +5726,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5624,6 +5815,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5674,7 +5866,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5684,7 +5876,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5694,7 +5886,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5704,9 +5896,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5737,7 +5930,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5794,7 +5987,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5804,7 +5997,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5813,23 +6006,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5853,6 +6052,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5873,9 +6073,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007ad9; color: #ffffff; @@ -5917,6 +6119,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5952,6 +6155,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5966,6 +6170,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-progressbar { border: 0 none; height: 24px; @@ -5981,6 +6186,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6002,6 +6208,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -6009,6 +6216,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007ad9; color: #ffffff; @@ -6041,6 +6249,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #333333; @@ -6060,6 +6269,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #b4b4b4; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #ffffff; } diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index bc0f97f6123..3207d64e2c2 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #a80000; } + .p-text-secondary { color: #848484; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-autocomplete-panel { background: #ffffff; color: #333333; @@ -422,9 +435,11 @@ background: #f4f4f4; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a80000; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #848484; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #848484; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #333333; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #848484; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #848484; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect-panel { background: #ffffff; color: #333333; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a80000; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #848484; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #005b9f; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -826,15 +856,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -873,9 +907,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a80000; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -883,22 +919,26 @@ color: #848484; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -942,6 +982,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown-panel { background: #ffffff; color: #333333; @@ -1005,6 +1046,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1017,9 +1059,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a80000; } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1032,60 +1076,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a6a6a6; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1093,9 +1145,11 @@ color: #848484; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1103,12 +1157,14 @@ color: #848484; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1147,9 +1203,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1182,45 +1240,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #666666; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a80000; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #666666; } + :-moz-placeholder { color: #666666; } + ::-moz-placeholder { color: #666666; } + :-ms-input-placeholder { color: #666666; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1230,14 +1300,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #333333; @@ -1312,9 +1385,11 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a80000; } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1354,9 +1429,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1364,6 +1441,7 @@ color: #848484; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1452,6 +1530,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1461,12 +1540,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a80000; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a80000; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1488,6 +1570,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1495,6 +1578,7 @@ color: #848484; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1502,6 +1586,7 @@ color: #848484; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1539,9 +1624,11 @@ background: #005b9f; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1554,12 +1641,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1590,9 +1680,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #dadada; border: 1px solid #dadada; @@ -1600,7 +1692,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1609,7 +1701,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-selectbutton .p-button.p-highlight { @@ -1618,7 +1710,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1627,12 +1719,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a80000; } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1684,6 +1778,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; @@ -1691,7 +1786,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1700,7 +1795,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-togglebutton.p-button.p-highlight { @@ -1709,7 +1804,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1718,12 +1813,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a80000; } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1760,12 +1857,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #333333; @@ -1825,6 +1925,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1834,6 +1935,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1841,6 +1943,7 @@ color: #848484; right: 2.357rem; } + .p-button { color: #ffffff; background: #007ad9; @@ -1952,7 +2055,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1979,6 +2082,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1991,414 +2095,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #546e7a; color: #ffffff; border-color: #546e7a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b0bec5; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #455a64; color: #ffffff; border-color: #455a64; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8dcdff; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #007ad9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34a835; border: 1px solid #34a835; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #107d11; color: #ffffff; border-color: #107d11; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #aae5aa; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #0c6b0d; color: #ffffff; border-color: #0c6b0d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 168, 53, 0.16); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #34a835; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34a835; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34a835; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ed990b; color: #333333; border-color: #ed990b; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffeab4; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d38b10; color: #333333; border-color: #d38b10; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffba01; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8e24aa; color: #ffffff; border-color: #8e24aa; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7b1fa2; color: #ffffff; border-color: #7b1fa2; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c01120; color: #ffffff; border-color: #c01120; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4ba; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a90000; color: #ffffff; border-color: #a90000; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e91224; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; } + .p-button.p-button-link { color: #005b9f; background: transparent; @@ -2422,6 +2533,7 @@ color: #005b9f; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2433,14 +2545,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2451,45 +2566,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2567,6 +2689,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2595,6 +2718,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #007ad9; @@ -2623,6 +2747,7 @@ border-color: transparent; color: #007ad9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #34a835; @@ -2651,6 +2776,7 @@ border-color: transparent; color: #34a835; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffba01; @@ -2679,6 +2805,7 @@ border-color: transparent; color: #ffba01; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2707,6 +2834,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e91224; @@ -2735,8 +2863,9 @@ border-color: transparent; color: #e91224; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2747,13 +2876,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2779,6 +2908,7 @@ background: #007ad9; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2872,9 +3002,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2884,17 +3014,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #8dcdff; @@ -2924,12 +3054,12 @@ background: #007ad9; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f4f4f4; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f4f4f4; } .p-datatable .p-datatable-loading-icon { @@ -3032,6 +3162,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3070,10 +3201,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3101,6 +3234,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3120,6 +3254,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-overlay { background: #ffffff; color: #333333; @@ -3157,6 +3292,7 @@ border-top: 1px solid #d8dae2; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #eaeaea; @@ -3185,20 +3321,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-orderlist .p-orderlist-header { - background: #f4f4f4; color: #333333; - border: 1px solid #c8c8c8; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3217,14 +3363,13 @@ color: #848484; } .p-orderlist .p-orderlist-list { - border: 1px solid #c8c8c8; - background: #ffffff; color: #333333; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3262,6 +3407,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #eaeaea; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3270,6 +3416,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3308,6 +3455,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3317,9 +3465,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #848484; @@ -3330,9 +3478,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #333333; @@ -3389,20 +3537,30 @@ border-color: transparent; color: #333333; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-picklist .p-picklist-header { - background: #f4f4f4; color: #333333; - border: 1px solid #c8c8c8; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3421,14 +3579,13 @@ color: #848484; } .p-picklist .p-picklist-list { - border: 1px solid #c8c8c8; - background: #ffffff; color: #333333; padding: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3466,6 +3623,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #eaeaea; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3474,6 +3632,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3485,19 +3644,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3554,11 +3714,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3631,6 +3791,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3770,7 +3931,7 @@ background: #007ad9; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f4f4f4; } .p-treetable .p-treetable-loading-icon { @@ -3831,6 +3992,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f4f4f4; color: #333333; @@ -3855,6 +4017,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #c8c8c8; @@ -3903,6 +4066,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #333333; @@ -3928,6 +4092,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3951,6 +4116,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3991,6 +4157,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #c8c8c8; padding: 0.857rem 1rem; @@ -4057,6 +4224,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4067,6 +4235,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -4088,6 +4257,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4156,6 +4326,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f4f4f4; border: 1px solid #c8c8c8; @@ -4166,6 +4337,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -4213,6 +4385,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4285,6 +4458,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -4326,6 +4500,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #c8c8c8; } + .p-sidebar { background: #ffffff; color: #333333; @@ -4336,7 +4511,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4346,13 +4521,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -4366,6 +4541,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4385,6 +4561,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #333333; } + .p-fileupload .p-fileupload-buttonbar { background: #f4f4f4; padding: 0.857rem 1rem; @@ -4424,6 +4601,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #116fbf; color: #ffffff; @@ -4434,6 +4612,7 @@ color: #ffffff; border-color: #005b9f; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4465,6 +4644,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #333333; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4512,7 +4692,7 @@ color: #333333; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4526,7 +4706,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4537,7 +4717,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem-separator { @@ -4551,6 +4731,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4574,31 +4755,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4657,7 +4839,7 @@ color: #333333; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4671,7 +4853,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4682,7 +4864,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-megamenu-panel { @@ -4740,9 +4922,10 @@ color: #333333; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } + .p-menu { padding: 0; background: #ffffff; @@ -4779,7 +4962,7 @@ color: #333333; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4793,7 +4976,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4804,7 +4987,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu.p-menu-overlay { @@ -4838,6 +5021,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4876,7 +5060,7 @@ color: #333333; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4907,7 +5091,7 @@ color: #333333; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4921,7 +5105,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4932,7 +5116,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-submenu-list { @@ -4949,6 +5133,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5123,7 +5308,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5137,7 +5322,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5148,7 +5333,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5164,6 +5349,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5206,7 +5392,7 @@ color: #333333; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5220,7 +5406,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5231,7 +5417,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu.p-slidemenu-overlay { @@ -5278,6 +5464,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -5322,6 +5509,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5392,6 +5580,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #8dcdff; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5442,7 +5631,7 @@ color: #333333; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5456,7 +5645,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5467,7 +5656,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem-separator { @@ -5481,6 +5670,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5536,6 +5726,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5624,6 +5815,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5674,7 +5866,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5684,7 +5876,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5694,7 +5886,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5704,9 +5896,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5737,7 +5930,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5794,7 +5987,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5804,7 +5997,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5813,23 +6006,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5853,6 +6052,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5873,9 +6073,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007ad9; color: #ffffff; @@ -5917,6 +6119,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5952,6 +6155,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5966,6 +6170,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-progressbar { border: 0 none; height: 24px; @@ -5981,6 +6186,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6002,6 +6208,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -6009,6 +6216,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007ad9; color: #ffffff; @@ -6041,6 +6249,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #333333; @@ -6060,6 +6269,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #333333; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #848484; } diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 7b2e084ef5e..889b093ccff 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e7a3a3; } + .p-text-secondary { color: #a6a6a6; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .p-autocomplete-panel { background: #ffffff; color: #666666; @@ -422,9 +435,11 @@ background: #f4f4f4; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e7a3a3; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -432,19 +447,23 @@ color: #a6a6a6; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #a6a6a6; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e7a3a3; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 2px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #666666; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #7b95a3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -659,10 +679,12 @@ color: #a6a6a6; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #a6a6a6; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e7a3a3; } + .p-cascadeselect-panel { background: #ffffff; color: #666666; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e7a3a3; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -763,6 +789,7 @@ color: #a6a6a6; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #617c8a; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e7a3a3; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #617c8a; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e7a3a3; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a6a6a6; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e7a3a3; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -880,22 +915,26 @@ color: #a6a6a6; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #dadada; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e7a3a3; } + .p-dropdown-panel { background: #ffffff; color: #666666; @@ -1002,6 +1042,7 @@ color: #666666; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e7a3a3; } + .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #dadada; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e7a3a3; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1090,9 +1141,11 @@ color: #a6a6a6; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e7a3a3; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1100,12 +1153,14 @@ color: #a6a6a6; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #afd3c8; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e7a3a3; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #a6a6a6; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e7a3a3; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #a6a6a6; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #a6a6a6; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #a6a6a6; } + :-moz-placeholder { color: #a6a6a6; } + ::-moz-placeholder { color: #a6a6a6; } + :-ms-input-placeholder { color: #a6a6a6; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #666666; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e7a3a3; } + .p-multiselect { background: #ffffff; border: 1px solid #dadada; @@ -1351,9 +1425,11 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1361,6 +1437,7 @@ color: #a6a6a6; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #666666; @@ -1449,6 +1526,7 @@ color: #666666; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e7a3a3; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e7a3a3; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #a3e2c6; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1492,6 +1574,7 @@ color: #a6a6a6; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1499,6 +1582,7 @@ color: #a6a6a6; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #617c8a; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e7a3a3; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #617c8a; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #d66161; } + .p-selectbutton .p-button { background: #eaeaea; border: 1px solid #eaeaea; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #666666; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #385048; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #385048; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #385048; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #385048; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e7a3a3; } + .p-slider { background: #c4c4c4; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #eaeaea; border: 1px solid #eaeaea; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #666666; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #385048; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #385048; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #385048; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #385048; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e7a3a3; } + .p-treeselect { background: #ffffff; border: 1px solid #dadada; @@ -1751,12 +1845,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e7a3a3; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #666666; @@ -1816,6 +1913,7 @@ color: #666666; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1832,6 +1931,7 @@ color: #a6a6a6; right: 2.357rem; } + .p-button { color: #ffffff; background: #7b95a3; @@ -1943,7 +2043,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #a3897b; border: 1px solid #8e6f5f; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #8e6f5f; color: #ffffff; border-color: #7a5743; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfaaa0; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #7a5743; color: #ffffff; border-color: #6e4e3c; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #a3897b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(163, 137, 123, 0.04); color: #a3897b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(163, 137, 123, 0.16); color: #a3897b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #a3897b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(163, 137, 123, 0.04); border-color: transparent; color: #a3897b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(163, 137, 123, 0.16); border-color: transparent; color: #a3897b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #3d4447; background: #a3def8; border: 1px solid #79c8eb; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #81cbec; color: #3d4447; border-color: #60b7de; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d2effc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #3ea9db; color: #3d4447; border-color: #2987b1; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #a3def8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(163, 222, 248, 0.04); color: #a3def8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(163, 222, 248, 0.16); color: #a3def8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #a3def8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(163, 222, 248, 0.04); border-color: transparent; color: #a3def8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(163, 222, 248, 0.16); border-color: transparent; color: #a3def8; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #323e39; background: #a3e2c6; border: 1px solid #80caaa; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #80caaa; color: #323e39; border-color: #5ea285; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #caeede; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #31b57c; color: #323e39; border-color: #5ea285; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #a3e2c6; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(163, 226, 198, 0.04); color: #a3e2c6; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(163, 226, 198, 0.16); color: #a3e2c6; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #a3e2c6; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(163, 226, 198, 0.04); border-color: transparent; color: #a3e2c6; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(163, 226, 198, 0.16); border-color: transparent; color: #a3e2c6; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffe38e; border: 1px solid #ffd95e; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd95e; color: #333333; border-color: #ffce3c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffce3c; color: #333333; border-color: #ffc62a; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe38e; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 227, 142, 0.04); color: #ffe38e; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 227, 142, 0.16); color: #ffe38e; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe38e; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 227, 142, 0.04); border-color: transparent; color: #ffe38e; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 227, 142, 0.16); border-color: transparent; color: #ffe38e; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #333333; background: #e9bef1; border: 1px solid #de9eea; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #de9eea; color: #333333; border-color: #d37de3; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f0d3f6; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #d37de3; color: #333333; border-color: #c85ddc; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #e9bef1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 190, 241, 0.04); color: #e9bef1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 190, 241, 0.16); color: #e9bef1; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #e9bef1; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 190, 241, 0.04); border-color: transparent; color: #e9bef1; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 190, 241, 0.16); border-color: transparent; color: #e9bef1; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #262222; background: #f4b6b6; border: 1px solid #e38787; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef9999; color: #262222; border-color: #cb5858; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fbe2e2; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #eb5656; color: #262222; border-color: #b73737; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f4b6b6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 182, 182, 0.04); color: #f4b6b6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 182, 182, 0.16); color: #f4b6b6; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f4b6b6; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 182, 182, 0.04); border-color: transparent; color: #f4b6b6; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 182, 182, 0.16); border-color: transparent; color: #f4b6b6; } + .p-button.p-button-link { color: #617c8a; background: transparent; @@ -2413,6 +2521,7 @@ color: #617c8a; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 2px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #a3897b; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #a3897b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #a3def8; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #a3def8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #a3e2c6; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #a3e2c6; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe38e; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe38e; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #e9bef1; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #e9bef1; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f4b6b6; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f4b6b6; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -2770,6 +2896,7 @@ background: #afd3c8; color: #385048; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #e4e9ec; @@ -2915,12 +3042,12 @@ background: #7b95a3; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #7b95a3; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-column-filter-overlay { background: #ffffff; color: #666666; @@ -3148,6 +3280,7 @@ border-top: 1px solid #dadada; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #dadada; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dadada; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; + } .p-orderlist .p-orderlist-header { - background: #7b95a3; color: #ffffff; - border: 1px solid #7b95a3; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 2px; - border-top-left-radius: 2px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3208,14 +3351,13 @@ color: #a6a6a6; } .p-orderlist .p-orderlist-list { - border: 1px solid #dadada; - background: #ffffff; color: #666666; padding: 0; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dadada; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f4f4f4; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f4; color: #666666; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-paginator { background: #ffffff; color: #666666; @@ -3308,9 +3453,9 @@ border-radius: 2px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #666666; @@ -3321,9 +3466,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f4; border-color: transparent; color: #666666; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #666666; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dadada; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; + } .p-picklist .p-picklist-header { - background: #7b95a3; color: #ffffff; - border: 1px solid #7b95a3; padding: 0.857rem 1rem; - border-bottom: 0 none; - border-top-right-radius: 2px; - border-top-left-radius: 2px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3412,14 +3567,13 @@ color: #a6a6a6; } .p-picklist .p-picklist-list { - border: 1px solid #dadada; - background: #ffffff; color: #666666; padding: 0; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dadada; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f4f4f4; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dadada; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #385048; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #385048; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #385048; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #7b95a3; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #7b95a3; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #7b95a3; color: #ffffff; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #7b95a3; @@ -3894,6 +4054,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #666666; @@ -3919,6 +4080,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3942,6 +4104,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dadada; background: #ffffff; @@ -3982,6 +4145,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #7b95a3; padding: 0.857rem 1rem; @@ -4048,6 +4212,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4058,6 +4223,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-splitter { border: 1px solid #dadada; background: #ffffff; @@ -4079,6 +4245,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dadada; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4147,6 +4314,7 @@ border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } + .p-toolbar { background: #7b95a3; border: 1px solid #7b95a3; @@ -4157,6 +4325,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #666666; @@ -4204,6 +4373,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 2px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4276,6 +4446,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #666666; @@ -4317,6 +4488,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #f1f1f1; } + .p-sidebar { background: #ffffff; color: #666666; @@ -4327,7 +4499,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4337,13 +4509,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -4357,6 +4529,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #afd3c8; color: #385048; @@ -4376,6 +4549,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #afd3c8; } + .p-fileupload .p-fileupload-buttonbar { background: #7b95a3; padding: 0.857rem 1rem; @@ -4415,6 +4589,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6c8999; color: #ffffff; @@ -4425,6 +4600,7 @@ color: #ffffff; border-color: #617c8a; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4456,6 +4632,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #666666; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4503,7 +4680,7 @@ color: #666666; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4517,7 +4694,7 @@ color: #666666; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4528,7 +4705,7 @@ color: #666666; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-contextmenu .p-menuitem-separator { @@ -4542,6 +4719,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4565,31 +4743,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4648,7 +4827,7 @@ color: #666666; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4662,7 +4841,7 @@ color: #666666; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4673,7 +4852,7 @@ color: #666666; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-megamenu .p-megamenu-panel { @@ -4731,9 +4910,10 @@ color: #666666; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } + .p-menu { padding: 0; background: #ffffff; @@ -4770,7 +4950,7 @@ color: #666666; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4784,7 +4964,7 @@ color: #666666; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4795,7 +4975,7 @@ color: #666666; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menu.p-menu-overlay { @@ -4829,6 +5009,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4867,7 +5048,7 @@ color: #666666; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4898,7 +5079,7 @@ color: #666666; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4912,7 +5093,7 @@ color: #666666; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4923,7 +5104,7 @@ color: #666666; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-submenu-list { @@ -4940,6 +5121,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5114,7 +5296,7 @@ color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5128,7 +5310,7 @@ color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5139,7 +5321,7 @@ color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5155,6 +5337,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5197,7 +5380,7 @@ color: #666666; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5211,7 +5394,7 @@ color: #666666; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5222,7 +5405,7 @@ color: #666666; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-slidemenu.p-slidemenu-overlay { @@ -5269,6 +5452,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5313,6 +5497,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5383,6 +5568,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #e4e9ec; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5433,7 +5619,7 @@ color: #666666; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5447,7 +5633,7 @@ color: #666666; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5458,7 +5644,7 @@ color: #666666; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-tieredmenu .p-menuitem-separator { @@ -5472,6 +5658,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5527,6 +5714,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5615,6 +5803,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5665,7 +5854,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5675,7 +5864,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5685,7 +5874,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5695,9 +5884,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5728,7 +5918,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5785,7 +5975,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5795,7 +5985,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5804,23 +5994,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5844,6 +6040,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dadada; border-radius: 2px; @@ -5864,9 +6061,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #7b95a3; color: #ffffff; @@ -5908,6 +6107,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dadada; color: #666666; @@ -5943,6 +6143,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 2px; @@ -5957,6 +6158,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-progressbar { border: 0 none; height: 24px; @@ -5972,6 +6174,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5993,6 +6196,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #dadada; border-radius: 2px; @@ -6000,6 +6204,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #7b95a3; color: #ffffff; @@ -6032,6 +6237,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #666666; @@ -6051,6 +6257,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #ffffff; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #ffffff; } diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index 53051474ba6..04dcaa776a7 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196F3; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #2196F3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #0b7ad1; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0b7ad1; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2196F3; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1002,6 +1042,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d89ec; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196F3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1449,6 +1526,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #0b7ad1; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0b7ad1; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1816,6 +1913,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #ffffff; background: #2196F3; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #0b7ad1; background: transparent; @@ -2413,6 +2521,7 @@ color: #0b7ad1; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -2770,6 +2896,7 @@ background: #E3F2FD; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #a6d5fa; @@ -2915,12 +3042,12 @@ background: #2196F3; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3148,6 +3280,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196F3; + } .p-orderlist .p-orderlist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: #6c757d; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196F3; + } .p-picklist .p-picklist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: #6c757d; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #2196F3; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #2196F3; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0d89ec; color: #ffffff; @@ -4449,6 +4624,7 @@ color: #ffffff; border-color: #0b7ad1; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4527,7 +4704,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4794,7 +4974,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4891,7 +5072,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5245,7 +5428,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #a6d5fa; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5481,7 +5667,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #2196F3; color: #ffffff; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #2196F3; color: #ffffff; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6097,9 +6303,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #2196F3; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #2196F3; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #2196F3; } diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index 045f8b7e4ef..4b19f96c78a 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4CAF50; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #4CAF50; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #3d8c40; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3d8c40; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #4CAF50; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1002,6 +1042,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #449e48; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4CAF50; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1449,6 +1526,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #3d8c40; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3d8c40; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1816,6 +1913,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #ffffff; background: #4CAF50; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #3d8c40; background: transparent; @@ -2413,6 +2521,7 @@ color: #3d8c40; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -2770,6 +2896,7 @@ background: #E8F5E9; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #b7e0b8; @@ -2915,12 +3042,12 @@ background: #4CAF50; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3148,6 +3280,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4CAF50; + } .p-orderlist .p-orderlist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: #6c757d; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4CAF50; + } .p-picklist .p-picklist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: #6c757d; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #4CAF50; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #4CAF50; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #449e48; color: #ffffff; @@ -4449,6 +4624,7 @@ color: #ffffff; border-color: #3d8c40; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4527,7 +4704,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4794,7 +4974,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4891,7 +5072,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5245,7 +5428,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #b7e0b8; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5481,7 +5667,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #4CAF50; color: #ffffff; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #4CAF50; color: #ffffff; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6097,9 +6303,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #4CAF50; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #4CAF50; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #4CAF50; } diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index 529f95fda9e..e6ac84c42b1 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #FFC107; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFC107; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #d29d00; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #d29d00; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFC107; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1002,6 +1042,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ecb100; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #FFC107; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1449,6 +1526,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #d29d00; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #d29d00; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1816,6 +1913,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #212529; background: #FFC107; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #d29d00; background: transparent; @@ -2413,6 +2521,7 @@ color: #d29d00; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -2770,6 +2896,7 @@ background: #FFF3E0; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #ffe69c; @@ -2915,12 +3042,12 @@ background: #FFC107; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3148,6 +3280,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #FFC107; + } .p-orderlist .p-orderlist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: #6c757d; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #FFC107; + } .p-picklist .p-picklist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: #6c757d; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFC107; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #FFC107; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #ecb100; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #d29d00; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4527,7 +4704,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4794,7 +4974,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4891,7 +5072,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5245,7 +5428,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #ffe69c; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5481,7 +5667,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #FFC107; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFC107; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6097,9 +6303,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFC107; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #FFC107; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #FFC107; } diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index d97f17bf54e..e0f31bd3c35 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -422,9 +435,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9C27B0; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9C27B0; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #7d1f8d; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #7d1f8d; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #9C27B0; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1002,6 +1042,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8c239e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9C27B0; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1449,6 +1526,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #7d1f8d; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7d1f8d; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1816,6 +1913,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #ffffff; background: #9C27B0; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #7d1f8d; background: transparent; @@ -2413,6 +2521,7 @@ color: #7d1f8d; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -2770,6 +2896,7 @@ background: #F3E5F5; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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 #df9eea; @@ -2915,12 +3042,12 @@ background: #9C27B0; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3148,6 +3280,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9C27B0; + } .p-orderlist .p-orderlist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: #6c757d; } .p-orderlist .p-orderlist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3380,20 +3525,30 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9C27B0; + } .p-picklist .p-picklist-header { - background: #f8f9fa; color: #495057; - border: 1px solid #dee2e6; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: #6c757d; } .p-picklist .p-picklist-list { - border: 1px solid #dee2e6; - background: #ffffff; color: #495057; padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #9C27B0; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3545,11 +3702,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #9C27B0; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #8c239e; color: #ffffff; @@ -4449,6 +4624,7 @@ color: #ffffff; border-color: #7d1f8d; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4527,7 +4704,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4794,7 +4974,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4891,7 +5072,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5245,7 +5428,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #df9eea; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5481,7 +5667,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #9C27B0; color: #ffffff; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #9C27B0; color: #ffffff; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6097,9 +6303,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #9C27B0; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #9C27B0; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9C27B0; } diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index b59a36033b0..d40e8111323 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -10,7 +10,7 @@ --text-color: rgba(255, 255, 255, 0.87); --text-color-secondary: rgba(255, 255, 255, 0.6); --primary-color: #b19df7; - --primary-color-text: hsl(234, 15%, 13%); + --primary-color-text: #1c1d26; --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -53,21 +53,24 @@ font-family: "Lato"; font-style: normal; font-weight: 300; - src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-regular - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; - src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-700 - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; - src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfe; @@ -295,32 +298,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ff9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -332,12 +343,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -354,6 +368,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -400,6 +415,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } + .p-autocomplete-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -441,9 +457,11 @@ background: #333544; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ff9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -451,19 +469,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ff9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + .p-datepicker { padding: 0.5rem; background: #282936; @@ -490,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -500,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -515,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #b19df7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -671,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -678,10 +701,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -724,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ff9a9a; } + .p-cascadeselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -763,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #3e4053; } @@ -772,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3e4053; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ff9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -782,6 +811,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -790,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -805,7 +836,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 14px; } .p-checkbox .p-checkbox-box .p-icon { @@ -828,11 +859,13 @@ .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3e4053; } @@ -845,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9378f4; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #b19df7; } @@ -889,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ff9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -899,22 +937,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #282936; border: 1px solid #3e4053; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1d1e27; border: 1px solid #3e4053; @@ -958,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ff9a9a; } + .p-dropdown-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1021,6 +1064,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #3e4053; } @@ -1033,9 +1077,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ff9a9a; } + .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1048,60 +1094,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #3e4053; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1109,9 +1163,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ff9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1119,12 +1175,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1163,9 +1221,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #a28af5; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ff9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1198,45 +1258,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ff9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #3e4053; } @@ -1246,14 +1318,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #3e4053; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1328,9 +1403,11 @@ box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ff9a9a; } + .p-multiselect { background: #1d1e27; border: 1px solid #3e4053; @@ -1370,9 +1447,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1380,6 +1459,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1468,6 +1548,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #3e4053; } @@ -1477,12 +1558,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #3e4053; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ff9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ff9a9a; } + .p-password-panel { padding: 1.25rem; background: #282936; @@ -1504,6 +1588,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1511,6 +1596,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1518,6 +1604,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1544,7 +1631,7 @@ width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234, 15%, 13%); + background-color: #1c1d26; } .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #b19df7; @@ -1553,11 +1640,13 @@ .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ff9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3e4053; } @@ -1570,9 +1659,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9378f4; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1603,6 +1694,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #282936; border: 1px solid #3e4053; @@ -1610,7 +1702,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1619,30 +1711,32 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #1c1d26; } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #1c1d26; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ff9a9a; } + .p-slider { background: #3e4053; border: 0 none; @@ -1694,6 +1788,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #282936; border: 1px solid #3e4053; @@ -1701,7 +1796,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1710,30 +1805,32 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #1c1d26; } .p-togglebutton.p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #1c1d26; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ff9a9a; } + .p-treeselect { background: #1d1e27; border: 1px solid #3e4053; @@ -1770,12 +1867,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ff9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1835,6 +1935,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #3e4053; } @@ -1844,6 +1945,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3e4053; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1851,8 +1953,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { - color: hsl(234, 15%, 13%); + color: #1c1d26; background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -1862,12 +1965,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #9378f4; } .p-button.p-button-outlined { @@ -1949,7 +2052,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234, 15%, 13%); + background-color: #1c1d26; } .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); @@ -1962,7 +2065,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1989,6 +2092,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2001,414 +2105,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #1d1e27; background: #d4ea93; border: 1px solid #d4ea93; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #c7e473; color: #1d1e27; border-color: #c7e473; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #e1f0b3; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #bbde53; color: #1d1e27; border-color: #bbde53; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #d4ea93; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(212, 234, 147, 0.04); color: #d4ea93; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(212, 234, 147, 0.16); color: #d4ea93; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #d4ea93; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(212, 234, 147, 0.04); border-color: transparent; color: #d4ea93; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(212, 234, 147, 0.16); border-color: transparent; color: #d4ea93; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #1d1e27; background: #9bcaff; border: 1px solid #9bcaff; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #72b4ff; color: #1d1e27; border-color: #72b4ff; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b9daff; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #499fff; color: #1d1e27; border-color: #499fff; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #9bcaff; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(155, 202, 255, 0.04); color: #9bcaff; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(155, 202, 255, 0.16); color: #9bcaff; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #9bcaff; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(155, 202, 255, 0.04); border-color: transparent; color: #9bcaff; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(155, 202, 255, 0.16); border-color: transparent; color: #9bcaff; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #1d1e27; background: #93deac; border: 1px solid #93deac; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #77d596; color: #1d1e27; border-color: #77d596; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b3e8c5; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #5acd81; color: #1d1e27; border-color: #5acd81; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #93deac; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(147, 222, 172, 0.04); color: #93deac; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(147, 222, 172, 0.16); color: #93deac; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #93deac; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(147, 222, 172, 0.04); border-color: transparent; color: #93deac; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(147, 222, 172, 0.16); border-color: transparent; color: #93deac; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #1d1e27; background: #ffcf91; border: 1px solid #ffcf91; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffbe69; color: #1d1e27; border-color: #ffbe69; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffddb2; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffac41; color: #1d1e27; border-color: #ffac41; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffcf91; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 207, 145, 0.04); color: #ffcf91; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 207, 145, 0.16); color: #ffcf91; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffcf91; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 207, 145, 0.04); border-color: transparent; color: #ffcf91; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 207, 145, 0.16); border-color: transparent; color: #ffcf91; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #1d1e27; background: #86e0e7; border: 1px solid #86e0e7; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #68d8e1; color: #1d1e27; border-color: #68d8e1; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #aae9ee; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #49d0db; color: #1d1e27; border-color: #49d0db; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #86e0e7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(134, 224, 231, 0.04); color: #86e0e7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(134, 224, 231, 0.16); color: #86e0e7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #86e0e7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(134, 224, 231, 0.04); border-color: transparent; color: #86e0e7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(134, 224, 231, 0.16); border-color: transparent; color: #86e0e7; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #1d1e27; background: #eb9a9c; border: 1px solid #eb9a9c; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e57a7c; color: #1d1e27; border-color: #e57a7c; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f1b8ba; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #de595c; color: #1d1e27; border-color: #de595c; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #eb9a9c; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(235, 154, 156, 0.04); color: #eb9a9c; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(235, 154, 156, 0.16); color: #eb9a9c; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #eb9a9c; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(235, 154, 156, 0.04); border-color: transparent; color: #eb9a9c; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(235, 154, 156, 0.16); border-color: transparent; color: #eb9a9c; } + .p-button.p-button-link { color: #b19df7; background: transparent; @@ -2432,6 +2543,7 @@ color: #b19df7; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2443,14 +2555,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2461,45 +2576,52 @@ background: rgba(255, 255, 255, 0.6); color: #1d1e27; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2577,6 +2699,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #d4ea93; @@ -2605,6 +2728,7 @@ border-color: transparent; color: #d4ea93; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #9bcaff; @@ -2633,6 +2757,7 @@ border-color: transparent; color: #9bcaff; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #93deac; @@ -2661,6 +2786,7 @@ border-color: transparent; color: #93deac; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffcf91; @@ -2689,6 +2815,7 @@ border-color: transparent; color: #ffcf91; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #86e0e7; @@ -2717,6 +2844,7 @@ border-color: transparent; color: #86e0e7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #eb9a9c; @@ -2745,8 +2873,9 @@ border-color: transparent; color: #eb9a9c; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2757,13 +2886,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -2789,6 +2918,7 @@ background: rgba(177, 157, 247, 0.16); color: #b19df7; } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2882,9 +3012,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2894,17 +3024,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -2934,12 +3064,12 @@ background: #b19df7; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #282936; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #282936; } .p-datatable .p-datatable-loading-icon { @@ -3042,6 +3172,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3080,10 +3211,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3111,6 +3244,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3130,6 +3264,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-column-filter-overlay { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -3167,6 +3302,7 @@ border-top: 1px solid #3e4053; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #3e4053; @@ -3195,20 +3331,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #282936; - color: rgba(255, 255, 255, 0.87); border: 1px solid #3e4053; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3227,14 +3373,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #3e4053; - background: #282936; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3e4053; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3272,6 +3417,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3280,6 +3426,7 @@ background: #282936; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3318,6 +3465,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-paginator { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -3327,9 +3475,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3340,9 +3488,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3399,20 +3547,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #282936; - color: rgba(255, 255, 255, 0.87); border: 1px solid #3e4053; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3431,14 +3589,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #3e4053; - background: #282936; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3e4053; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3476,6 +3633,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; 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); @@ -3484,30 +3642,32 @@ background: #282936; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #b19df7; border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234, 15%, 13%); + background-color: #1c1d26; } .p-timeline .p-timeline-event-connector { background-color: #3e4053; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #3e4053; background: #282936; @@ -3564,11 +3724,11 @@ color: #b19df7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #b19df7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #b19df7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3641,6 +3801,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3780,7 +3941,7 @@ background: #b19df7; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #282936; } .p-treetable .p-treetable-loading-icon { @@ -3841,6 +4002,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -3865,6 +4027,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #3e4053; @@ -3913,6 +4076,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -3938,6 +4102,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #282936; } @@ -3961,6 +4126,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #3e4053; background: #282936; @@ -4001,6 +4167,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #3e4053; padding: 1.25rem; @@ -4067,6 +4234,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3e4053; border: 0 none; @@ -4077,6 +4245,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-splitter { border: 1px solid #3e4053; background: #282936; @@ -4098,6 +4267,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #3e4053; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4166,6 +4336,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #282936; border: 1px solid #3e4053; @@ -4176,6 +4347,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4223,6 +4395,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4295,6 +4468,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4307,7 +4481,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4318,7 +4492,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-overlaypanel:after { border: solid transparent; @@ -4336,6 +4510,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #3e4053; } + .p-sidebar { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4346,7 +4521,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4356,13 +4531,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -4376,6 +4551,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3e4053; color: rgba(255, 255, 255, 0.87); @@ -4395,6 +4571,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3e4053; } + .p-fileupload .p-fileupload-buttonbar { background: #282936; padding: 1.25rem; @@ -4434,16 +4611,18 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #a28af5; } .p-fileupload-choose:not(.p-disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #9378f4; } + .p-breadcrumb { background: #333544; border: 1px solid #3e4053; @@ -4475,6 +4654,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #333544; @@ -4522,7 +4702,7 @@ color: #b19df7; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4536,7 +4716,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4547,7 +4727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4561,6 +4741,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4584,31 +4765,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4667,7 +4849,7 @@ color: #b19df7; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4681,7 +4863,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4692,7 +4874,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4750,9 +4932,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #333544; @@ -4789,7 +4972,7 @@ color: #b19df7; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4803,7 +4986,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4814,7 +4997,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4837,7 +5020,7 @@ } .p-menu .p-menuitem-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -4848,6 +5031,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #333544; @@ -4886,7 +5070,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4917,7 +5101,7 @@ color: #b19df7; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4931,7 +5115,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4942,7 +5126,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4959,6 +5143,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5133,7 +5318,7 @@ color: #b19df7; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5147,7 +5332,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5158,7 +5343,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5174,6 +5359,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #333544; @@ -5216,7 +5402,7 @@ color: #b19df7; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5230,7 +5416,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5241,7 +5427,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5277,7 +5463,7 @@ } .p-slidemenu .p-menuitem-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -5288,6 +5474,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5332,6 +5519,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3e4053; @@ -5339,7 +5527,7 @@ } .p-tabmenu .p-tabmenu-nav .p-menuitem-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -5402,6 +5590,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #e0d8fc; } + .p-tieredmenu { padding: 0.25rem 0; background: #333544; @@ -5452,7 +5641,7 @@ color: #b19df7; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5466,7 +5655,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5477,7 +5666,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5491,6 +5680,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5546,6 +5736,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5634,6 +5825,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5684,7 +5876,7 @@ color: #696cff; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #696cff; } .p-toast .p-toast-message.p-toast-message-success { @@ -5694,7 +5886,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5704,7 +5896,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5714,9 +5906,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5747,7 +5940,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5804,7 +5997,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5814,7 +6007,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5823,23 +6016,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5863,6 +6062,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #3e4053; border-radius: 6px; @@ -5883,12 +6083,14 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #282936; } + .p-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -5927,6 +6129,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #3e4053; color: rgba(255, 255, 255, 0.87); @@ -5962,6 +6165,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5976,6 +6180,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5988,9 +6193,10 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234, 15%, 13%); + color: #1c1d26; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6012,6 +6218,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6019,9 +6226,10 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6051,6 +6259,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -6067,12 +6276,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #b19df7; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #b19df7; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #b19df7; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #b19df7; } diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index 5e1627130f5..20cff3f6de4 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -53,21 +53,24 @@ font-family: "Lato"; font-style: normal; font-weight: 300; - src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-regular - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; - src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-700 - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; - src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfe; @@ -295,32 +298,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #ff6767; } + .p-text-secondary { color: #708da9; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -332,12 +343,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -354,6 +368,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -400,6 +415,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } + .p-autocomplete-panel { background: #ffffff; color: #043d75; @@ -441,9 +457,11 @@ background: #eff3f8; font-weight: 700; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ff6767; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -451,19 +469,23 @@ color: #708da9; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #708da9; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ff6767; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + .p-datepicker { padding: 0.5rem; background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); @@ -490,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #708da9; @@ -500,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -515,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #ffffff; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #7254f3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -671,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -678,10 +701,12 @@ color: #708da9; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #708da9; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -724,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ff6767; } + .p-cascadeselect-panel { background: #ffffff; color: #043d75; @@ -763,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f6f9fc; } @@ -772,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ff6767; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -782,6 +811,7 @@ color: #708da9; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -790,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -830,9 +861,11 @@ background: #5935f1; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff6767; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f6f9fc; } @@ -845,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #5935f1; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff6767; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #7254f3; } @@ -889,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ff6767; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -899,22 +937,26 @@ color: #708da9; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d3dbe3; @@ -958,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ff6767; } + .p-dropdown-panel { background: #ffffff; color: #043d75; @@ -1021,6 +1064,7 @@ color: #043d75; background: transparent; } + .p-input-filled .p-dropdown { background: #f6f9fc; } @@ -1033,9 +1077,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ff6767; } + .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1048,60 +1094,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d3dbe3; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff6767; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1109,9 +1163,11 @@ color: #708da9; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ff6767; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1119,12 +1175,14 @@ color: #708da9; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1163,9 +1221,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6545f2; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ff6767; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1198,45 +1258,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #708da9; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ff6767; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #708da9; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #708da9; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #708da9; } + :-moz-placeholder { color: #708da9; } + ::-moz-placeholder { color: #708da9; } + :-ms-input-placeholder { color: #708da9; } + .p-input-filled .p-inputtext { background-color: #f6f9fc; } @@ -1246,14 +1318,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #043d75; @@ -1328,9 +1403,11 @@ box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ff6767; } + .p-multiselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -1370,9 +1447,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1380,6 +1459,7 @@ color: #708da9; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #043d75; @@ -1468,6 +1548,7 @@ color: #043d75; background: transparent; } + .p-input-filled .p-multiselect { background: #f6f9fc; } @@ -1477,12 +1558,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ff6767; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ff6767; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1504,6 +1588,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1511,6 +1596,7 @@ color: #708da9; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1518,6 +1604,7 @@ color: #708da9; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1555,9 +1642,11 @@ background: #5935f1; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ff6767; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f6f9fc; } @@ -1570,9 +1659,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #5935f1; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1603,6 +1694,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d3dbe3; @@ -1610,7 +1702,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #708da9; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1619,7 +1711,7 @@ color: #043d75; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #708da9; } .p-selectbutton .p-button.p-highlight { @@ -1628,7 +1720,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1637,12 +1729,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ff6767; } + .p-slider { background: #dfe7ef; border: 0 none; @@ -1694,6 +1788,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d3dbe3; @@ -1701,7 +1796,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #708da9; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1710,7 +1805,7 @@ color: #043d75; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #708da9; } .p-togglebutton.p-button.p-highlight { @@ -1719,7 +1814,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1728,12 +1823,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ff6767; } + .p-treeselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -1770,12 +1867,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ff6767; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #043d75; @@ -1835,6 +1935,7 @@ color: #043d75; background: transparent; } + .p-input-filled .p-treeselect { background: #f6f9fc; } @@ -1844,6 +1945,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1851,6 +1953,7 @@ color: #708da9; right: 3rem; } + .p-button { color: #ffffff; background: #7254f3; @@ -1962,7 +2065,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1989,6 +2092,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2001,414 +2105,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #a1c30d; border: 1px solid #a1c30d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #91b00c; color: #ffffff; border-color: #91b00c; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e4f78e; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #819c0a; color: #ffffff; border-color: #819c0a; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #a1c30d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(161, 195, 13, 0.04); color: #a1c30d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(161, 195, 13, 0.16); color: #a1c30d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #a1c30d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(161, 195, 13, 0.04); border-color: transparent; color: #a1c30d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(161, 195, 13, 0.16); border-color: transparent; color: #a1c30d; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #5486f3; border: 1px solid #5486f3; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #3570f1; color: #ffffff; border-color: #3570f1; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbcffa; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #175bef; color: #ffffff; border-color: #175bef; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #5486f3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(84, 134, 243, 0.04); color: #5486f3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(84, 134, 243, 0.16); color: #5486f3; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #5486f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(84, 134, 243, 0.04); border-color: transparent; color: #5486f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(84, 134, 243, 0.16); border-color: transparent; color: #5486f3; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #29c76f; border: 1px solid #29c76f; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #25b364; color: #ffffff; border-color: #25b364; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #a5edc5; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #219f59; color: #ffffff; border-color: #219f59; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #29c76f; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(41, 199, 111, 0.04); color: #29c76f; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(41, 199, 111, 0.16); color: #29c76f; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #29c76f; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(41, 199, 111, 0.04); border-color: transparent; color: #29c76f; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(41, 199, 111, 0.16); border-color: transparent; color: #29c76f; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #ff9f42; border: 1px solid #ff9f42; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ff8f22; color: #ffffff; border-color: #ff8f22; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffd9b3; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff7e02; color: #ffffff; border-color: #ff7e02; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ff9f42; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 159, 66, 0.04); color: #ff9f42; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 159, 66, 0.16); color: #ff9f42; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ff9f42; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 159, 66, 0.04); border-color: transparent; color: #ff9f42; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 159, 66, 0.16); border-color: transparent; color: #ff9f42; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #3ec9d6; border: 1px solid #3ec9d6; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #2cbfcd; color: #ffffff; border-color: #2cbfcd; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b2e9ef; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #27aab6; color: #ffffff; border-color: #27aab6; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #3ec9d6; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(62, 201, 214, 0.04); color: #3ec9d6; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(62, 201, 214, 0.16); color: #3ec9d6; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #3ec9d6; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(62, 201, 214, 0.04); border-color: transparent; color: #3ec9d6; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(62, 201, 214, 0.16); border-color: transparent; color: #3ec9d6; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ea5455; border: 1px solid #ea5455; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e73839; color: #ffffff; border-color: #e73839; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f7bbbb; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #e31c1d; color: #ffffff; border-color: #e31c1d; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ea5455; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(234, 84, 85, 0.04); color: #ea5455; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(234, 84, 85, 0.16); color: #ea5455; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ea5455; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(234, 84, 85, 0.04); border-color: transparent; color: #ea5455; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(234, 84, 85, 0.16); border-color: transparent; color: #ea5455; } + .p-button.p-button-link { color: #5935f1; background: transparent; @@ -2432,6 +2543,7 @@ color: #5935f1; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2443,14 +2555,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2461,45 +2576,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2577,6 +2699,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #a1c30d; @@ -2605,6 +2728,7 @@ border-color: transparent; color: #a1c30d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #5486f3; @@ -2633,6 +2757,7 @@ border-color: transparent; color: #5486f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #29c76f; @@ -2661,6 +2786,7 @@ border-color: transparent; color: #29c76f; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ff9f42; @@ -2689,6 +2815,7 @@ border-color: transparent; color: #ff9f42; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #3ec9d6; @@ -2717,6 +2844,7 @@ border-color: transparent; color: #3ec9d6; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ea5455; @@ -2745,8 +2873,9 @@ border-color: transparent; color: #ea5455; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #708da9; @@ -2757,13 +2886,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -2789,6 +2918,7 @@ background: #e2dcfc; color: #7254f3; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2882,9 +3012,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #708da9; @@ -2894,17 +3024,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -2934,12 +3064,12 @@ background: #7254f3; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #eff3f8; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #eff3f8; } .p-datatable .p-datatable-loading-icon { @@ -3042,6 +3172,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3080,10 +3211,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3111,6 +3244,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3130,6 +3264,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-column-filter-overlay { background: #ffffff; color: #043d75; @@ -3167,6 +3302,7 @@ border-top: 1px solid #dfe7ef; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #dfe7ef; @@ -3195,20 +3331,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #dfe7ef; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } .p-orderlist .p-orderlist-header { - background: #eff3f8; color: #708da9; - border: 1px solid #dfe7ef; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3227,14 +3373,13 @@ color: #708da9; } .p-orderlist .p-orderlist-list { - border: 1px solid #dfe7ef; - background: #ffffff; color: #043d75; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #dfe7ef; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3272,6 +3417,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f6f9fc; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3280,6 +3426,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f6f9fc; color: #043d75; @@ -3318,6 +3465,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-paginator { background: #ffffff; color: #708da9; @@ -3327,9 +3475,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #708da9; @@ -3340,9 +3488,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f6f9fc; border-color: transparent; color: #043d75; @@ -3399,20 +3547,30 @@ border-color: transparent; color: #043d75; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #dfe7ef; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } .p-picklist .p-picklist-header { - background: #eff3f8; color: #708da9; - border: 1px solid #dfe7ef; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3431,14 +3589,13 @@ color: #708da9; } .p-picklist .p-picklist-list { - border: 1px solid #dfe7ef; - background: #ffffff; color: #043d75; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #dfe7ef; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3476,6 +3633,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f6f9fc; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3484,6 +3642,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #7254f3; border-radius: 50%; @@ -3495,19 +3654,20 @@ background-color: #dfe7ef; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dfe7ef; background: #ffffff; @@ -3564,11 +3724,11 @@ color: #7254f3; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #7254f3; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #7254f3; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3641,6 +3801,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3780,7 +3941,7 @@ background: #7254f3; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #eff3f8; } .p-treetable .p-treetable-loading-icon { @@ -3841,6 +4002,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #eff3f8; color: #708da9; @@ -3865,6 +4027,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #dfe7ef; @@ -3913,6 +4076,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #043d75; @@ -3938,6 +4102,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3961,6 +4126,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dfe7ef; background: #ffffff; @@ -4001,6 +4167,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #dfe7ef; padding: 1.25rem; @@ -4067,6 +4234,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #eff3f8; border: 0 none; @@ -4077,6 +4245,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-splitter { border: 1px solid #dfe7ef; background: #ffffff; @@ -4098,6 +4267,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dfe7ef; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4166,6 +4336,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #eff3f8; border: 1px solid #dfe7ef; @@ -4176,6 +4347,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #043d75; @@ -4223,6 +4395,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4295,6 +4468,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #043d75; @@ -4336,6 +4510,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #043d75; @@ -4346,7 +4521,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #708da9; @@ -4356,13 +4531,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -4376,6 +4551,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #043d75; color: #ffffff; @@ -4395,6 +4571,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #043d75; } + .p-fileupload .p-fileupload-buttonbar { background: #eff3f8; padding: 1.25rem; @@ -4434,6 +4611,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6545f2; color: #ffffff; @@ -4444,6 +4622,7 @@ color: #ffffff; border-color: #5935f1; } + .p-breadcrumb { background: #eff3f8; border: 1px solid #dfe7ef; @@ -4475,6 +4654,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #708da9; } + .p-contextmenu { padding: 0.25rem 0; background: #eff3f8; @@ -4522,7 +4702,7 @@ color: #7254f3; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4536,7 +4716,7 @@ color: #043d75; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4547,7 +4727,7 @@ color: #043d75; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-contextmenu .p-menuitem-separator { @@ -4561,6 +4741,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4584,31 +4765,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4667,7 +4849,7 @@ color: #7254f3; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4681,7 +4863,7 @@ color: #043d75; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4692,7 +4874,7 @@ color: #043d75; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-megamenu .p-megamenu-panel { @@ -4750,9 +4932,10 @@ color: #043d75; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } + .p-menu { padding: 0.25rem 0; background: #eff3f8; @@ -4789,7 +4972,7 @@ color: #7254f3; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4803,7 +4986,7 @@ color: #043d75; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4814,7 +4997,7 @@ color: #043d75; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-menu.p-menu-overlay { @@ -4848,6 +5031,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #eff3f8; @@ -4886,7 +5070,7 @@ color: #043d75; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4917,7 +5101,7 @@ color: #7254f3; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4931,7 +5115,7 @@ color: #043d75; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4942,7 +5126,7 @@ color: #043d75; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-menubar .p-submenu-list { @@ -4959,6 +5143,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5133,7 +5318,7 @@ color: #7254f3; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5147,7 +5332,7 @@ color: #043d75; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5158,7 +5343,7 @@ color: #043d75; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5174,6 +5359,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #eff3f8; @@ -5216,7 +5402,7 @@ color: #7254f3; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5230,7 +5416,7 @@ color: #043d75; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5241,7 +5427,7 @@ color: #043d75; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-slidemenu.p-slidemenu-overlay { @@ -5288,6 +5474,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5332,6 +5519,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dfe7ef; @@ -5402,6 +5590,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #c7bbfa; } + .p-tieredmenu { padding: 0.25rem 0; background: #eff3f8; @@ -5452,7 +5641,7 @@ color: #7254f3; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5466,7 +5655,7 @@ color: #043d75; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5477,7 +5666,7 @@ color: #043d75; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-tieredmenu .p-menuitem-separator { @@ -5491,6 +5680,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5546,6 +5736,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5634,6 +5825,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5684,7 +5876,7 @@ color: #696cff; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #696cff; } .p-toast .p-toast-message.p-toast-message-success { @@ -5694,7 +5886,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5704,7 +5896,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5714,9 +5906,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5747,7 +5940,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5804,7 +5997,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #eff3f8; @@ -5814,7 +6007,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #eff3f8; } @@ -5823,23 +6016,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5863,6 +6062,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dfe7ef; border-radius: 6px; @@ -5883,9 +6083,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #7254f3; color: #ffffff; @@ -5927,6 +6129,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dfe7ef; color: #043d75; @@ -5962,6 +6165,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5976,6 +6180,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -5991,6 +6196,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6012,6 +6218,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #dfe7ef; border-radius: 6px; @@ -6019,6 +6226,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #7254f3; color: #ffffff; @@ -6051,6 +6259,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #043d75; @@ -6066,11 +6275,11 @@ /* Customizations to the designer theme should be defined here */ @layer primeng { .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { color: #ffffff; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.2); } @@ -6116,15 +6325,19 @@ color: #ffffff; background: rgba(255, 255, 255, 0.3); } + .p-button .p-button-label { font-weight: 700; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #7254f3; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #7254f3; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #7254f3; } diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 0fadbef6f0e..f61c07dba5e 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -55,31 +55,36 @@ font-family: "Inter"; font-style: normal; font-weight: 300; - src: local(""), url("./fonts/Inter-Light.woff2") format("woff2"), url("./fonts/Inter-Light.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Light.woff2") format("woff2"), url("./fonts/Inter-Light.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; - src: local(""), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; - src: local(""), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; - src: local(""), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; - src: local(""), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f5f9ff; @@ -243,7 +248,7 @@ .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; padding: 0.25rem 0; } @@ -307,32 +312,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #71717a; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -344,12 +357,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -366,6 +382,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -412,12 +429,13 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .p-autocomplete-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.25rem 0; @@ -453,9 +471,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f0a9a7; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -463,19 +483,23 @@ color: #71717a; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #71717a; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f0a9a7; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -486,7 +510,7 @@ .p-datepicker:not(.p-datepicker-inline) { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { background: #ffffff; @@ -502,7 +526,7 @@ border-top-left-radius: 0.375rem; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #71717a; @@ -512,13 +536,13 @@ transition: none; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -527,14 +551,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #3f3f46; transition: none; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #4f46e5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -683,6 +707,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -690,10 +715,12 @@ color: #71717a; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #71717a; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -736,12 +763,13 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f0a9a7; } + .p-cascadeselect-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-cascadeselect-panel .p-cascadeselect-items { padding: 0.25rem 0; @@ -775,6 +803,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #fafafa; } @@ -784,9 +813,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f0a9a7; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -794,6 +825,7 @@ color: #71717a; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -802,6 +834,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 16px; height: 16px; @@ -842,9 +875,11 @@ background: #4f46e5; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f0a9a7; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #fafafa; } @@ -857,12 +892,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4f46e5; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f0a9a7; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #d4d4d8; } @@ -901,9 +939,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f0a9a7; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -911,22 +951,26 @@ color: #71717a; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #27272a; border: 1px solid #18181b; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } + .p-dropdown { background: #ffffff; border: 1px solid #d4d4d8; @@ -970,12 +1014,13 @@ .p-dropdown.p-invalid.p-component { border-color: #f0a9a7; } + .p-dropdown-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 0.75rem; @@ -1033,6 +1078,7 @@ color: #3f3f46; background: transparent; } + .p-input-filled .p-dropdown { background: #fafafa; } @@ -1045,9 +1091,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f0a9a7; } + .p-inputgroup-addon { background: #fafafa; color: #71717a; @@ -1060,60 +1108,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d4d4d8; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f0a9a7; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1121,9 +1177,11 @@ color: #71717a; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f0a9a7; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1131,12 +1189,14 @@ color: #71717a; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1175,9 +1235,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4338ca; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f0a9a7; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1210,45 +1272,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #71717a; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f0a9a7; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #71717a; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #71717a; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #71717a; } + :-moz-placeholder { color: #71717a; } + ::-moz-placeholder { color: #71717a; } + :-ms-input-placeholder { color: #71717a; } + .p-input-filled .p-inputtext { background-color: #fafafa; } @@ -1258,14 +1332,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #3f3f46; @@ -1340,9 +1417,11 @@ box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f0a9a7; } + .p-multiselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -1382,9 +1461,11 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1392,12 +1473,13 @@ color: #71717a; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 0.75rem; @@ -1480,6 +1562,7 @@ color: #3f3f46; background: transparent; } + .p-input-filled .p-multiselect { background: #fafafa; } @@ -1489,18 +1572,21 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f0a9a7; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f0a9a7; } + .p-password-panel { padding: 1.25rem; background: #ffffff; color: #3f3f46; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } .p-password-panel .p-password-meter { @@ -1516,6 +1602,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1523,6 +1610,7 @@ color: #71717a; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1530,6 +1618,7 @@ color: #71717a; right: 2.5rem; } + .p-radiobutton { width: 16px; height: 16px; @@ -1567,9 +1656,11 @@ background: #4f46e5; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f0a9a7; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #fafafa; } @@ -1582,9 +1673,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4f46e5; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1615,6 +1708,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #dc2626; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d4d4d8; @@ -1622,7 +1716,7 @@ transition: none; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #71717a; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1631,7 +1725,7 @@ color: #3f3f46; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #71717a; } .p-selectbutton .p-button.p-highlight { @@ -1640,7 +1734,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1649,12 +1743,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f0a9a7; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1706,6 +1802,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d4d4d8; @@ -1713,7 +1810,7 @@ transition: none; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #71717a; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1722,7 +1819,7 @@ color: #3f3f46; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #71717a; } .p-togglebutton.p-button.p-highlight { @@ -1731,7 +1828,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1740,12 +1837,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f0a9a7; } + .p-treeselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -1782,18 +1881,21 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f0a9a7; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-treeselect-panel .p-treeselect-header { padding: 0.5rem 0.75rem; @@ -1847,6 +1949,7 @@ color: #3f3f46; background: transparent; } + .p-input-filled .p-treeselect { background: #fafafa; } @@ -1856,6 +1959,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1863,6 +1967,7 @@ color: #71717a; right: 3rem; } + .p-button { color: #ffffff; background: #4f46e5; @@ -1974,7 +2079,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -2001,6 +2106,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2013,414 +2119,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c0c7d2; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #3b82f6; border: 1px solid #3b82f6; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b1cdfb; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #2563eb; color: #ffffff; border-color: #2563eb; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #3b82f6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(59, 130, 246, 0.04); color: #3b82f6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(59, 130, 246, 0.16); color: #3b82f6; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #3b82f6; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(59, 130, 246, 0.04); border-color: transparent; color: #3b82f6; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(59, 130, 246, 0.16); border-color: transparent; color: #3b82f6; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #a0efbd; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f59e0b; border: 1px solid #f59e0b; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #d97706; color: #ffffff; border-color: #d97706; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fbd89d; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d97706; color: #ffffff; border-color: #d97706; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f59e0b; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(245, 158, 11, 0.04); color: #f59e0b; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f59e0b; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(245, 158, 11, 0.04); border-color: transparent; color: #f59e0b; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(245, 158, 11, 0.16); border-color: transparent; color: #f59e0b; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #dcbbfc; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4b4; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #4f46e5; background: transparent; @@ -2444,6 +2557,7 @@ color: #4f46e5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2455,14 +2569,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2473,45 +2590,52 @@ background: #27272a; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 0.375rem; } @@ -2589,6 +2713,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2617,6 +2742,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #3b82f6; @@ -2645,6 +2771,7 @@ border-color: transparent; color: #3b82f6; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2673,6 +2800,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f59e0b; @@ -2701,6 +2829,7 @@ border-color: transparent; color: #f59e0b; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2729,6 +2858,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2757,8 +2887,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #71717a; @@ -2769,13 +2900,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -2801,6 +2932,7 @@ background: #eef2ff; color: #312e81; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2894,9 +3026,9 @@ padding: 1rem 1.5rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #71717a; @@ -2906,17 +3038,17 @@ transition: none; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -2946,12 +3078,12 @@ background: #4f46e5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #fafafa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #fafafa; } .p-datatable .p-datatable-loading-icon { @@ -3054,6 +3186,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 1.875rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3092,10 +3225,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3123,6 +3258,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3142,12 +3278,13 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-column-filter-overlay { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); min-width: 12.5rem; } .p-column-filter-overlay .p-column-filter-row-items { @@ -3179,6 +3316,7 @@ border-top: 1px solid #f3f4f6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 0.75rem; border-bottom: 0 none; @@ -3207,20 +3345,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; + } .p-orderlist .p-orderlist-header { - background: #fafafa; color: #3f3f46; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3387,13 @@ color: #71717a; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #3f3f46; padding: 0.25rem 0; - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1rem; margin: 0; @@ -3284,14 +3431,16 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f4f4f5; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 0 none; color: #3f3f46; background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f5; color: #18181b; @@ -3330,6 +3479,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-paginator { background: #ffffff; color: #71717a; @@ -3339,9 +3489,9 @@ border-radius: 0.375rem; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 1px solid #d4d4d8; color: #71717a; @@ -3352,9 +3502,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f5; border-color: #d4d4d8; color: #3f3f46; @@ -3411,20 +3561,30 @@ border-color: #d4d4d8; color: #3f3f46; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; + } .p-picklist .p-picklist-header { - background: #fafafa; color: #3f3f46; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3443,14 +3603,13 @@ color: #71717a; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #3f3f46; padding: 0.25rem 0; - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1rem; margin: 0; @@ -3488,14 +3647,16 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f4f4f5; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 0 none; color: #3f3f46; background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #4f46e5; border-radius: 50%; @@ -3507,19 +3668,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3576,11 +3738,11 @@ color: #312e81; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #312e81; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #312e81; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3653,6 +3815,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3792,7 +3955,7 @@ background: #4f46e5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #fafafa; } .p-treetable .p-treetable-loading-icon { @@ -3853,6 +4016,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 1.875rem; } + .p-virtualscroller .p-virtualscroller-header { background: #fafafa; color: #3f3f46; @@ -3877,6 +4041,7 @@ border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3949,6 +4114,7 @@ border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-card { background: #ffffff; color: #3f3f46; @@ -3974,6 +4140,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3997,6 +4164,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -4037,6 +4205,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4103,6 +4272,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #fafafa; border: 0 none; @@ -4113,6 +4283,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4134,6 +4305,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4202,6 +4374,7 @@ border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-toolbar { background: #fafafa; border: 1px solid #e5e7eb; @@ -4212,6 +4385,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #3f3f46; @@ -4259,6 +4433,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 0.375rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); @@ -4331,6 +4506,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #3f3f46; @@ -4372,6 +4548,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #3f3f46; @@ -4382,7 +4559,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #71717a; @@ -4392,13 +4569,13 @@ transition: none; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -4412,11 +4589,12 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; padding: 0.75rem 0.75rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -4431,6 +4609,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3f3f46; } + .p-fileupload .p-fileupload-buttonbar { background: #fafafa; padding: 1.25rem; @@ -4470,6 +4649,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4338ca; color: #ffffff; @@ -4480,6 +4660,7 @@ color: #ffffff; border-color: #4338ca; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4511,12 +4692,13 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #71717a; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; color: #3f3f46; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; width: 12.5rem; } @@ -4527,7 +4709,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } .p-contextmenu .p-menuitem > .p-menuitem-content { @@ -4558,7 +4740,7 @@ color: #3f3f46; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4572,7 +4754,7 @@ color: #18181b; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4583,7 +4765,7 @@ color: #18181b; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-contextmenu .p-menuitem-separator { @@ -4597,6 +4779,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4620,31 +4803,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4703,7 +4887,7 @@ color: #3f3f46; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4717,7 +4901,7 @@ color: #18181b; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4728,14 +4912,14 @@ color: #18181b; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-megamenu .p-megamenu-panel { background: #ffffff; color: #3f3f46; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-megamenu .p-submenu-header { margin: 0; @@ -4786,9 +4970,10 @@ color: #18181b; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4825,7 +5010,7 @@ color: #3f3f46; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4839,7 +5024,7 @@ color: #18181b; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4850,13 +5035,13 @@ color: #18181b; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menu.p-menu-overlay { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-menu .p-submenu-header { margin: 0; @@ -4884,6 +5069,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: #fafafa; @@ -4922,7 +5108,7 @@ color: #18181b; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4953,7 +5139,7 @@ color: #3f3f46; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4967,7 +5153,7 @@ color: #18181b; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4978,14 +5164,14 @@ color: #18181b; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menubar .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { @@ -4995,6 +5181,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5022,7 +5209,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { @@ -5169,7 +5356,7 @@ color: #3f3f46; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5183,7 +5370,7 @@ color: #18181b; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5194,7 +5381,7 @@ color: #18181b; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5234,6 +5421,7 @@ border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5276,7 +5464,7 @@ color: #3f3f46; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5290,7 +5478,7 @@ color: #18181b; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5301,19 +5489,19 @@ color: #18181b; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-slidemenu.p-slidemenu-overlay { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-slidemenu .p-slidemenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-slidemenu .p-menuitem-separator { border-top: 1px solid #f3f4f6; @@ -5348,6 +5536,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5392,6 +5581,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5462,6 +5652,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #6366f1; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5473,7 +5664,7 @@ .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-tieredmenu .p-tieredmenu-root-list { outline: 0 none; @@ -5482,7 +5673,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #3f3f46; @@ -5512,7 +5703,7 @@ color: #3f3f46; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5526,7 +5717,7 @@ color: #18181b; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5537,7 +5728,7 @@ color: #18181b; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-tieredmenu .p-menuitem-separator { @@ -5551,6 +5742,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5606,6 +5798,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 0.375rem; @@ -5694,6 +5887,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5744,7 +5938,7 @@ color: #2563eb; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #2563eb; } .p-toast .p-toast-message.p-toast-message-success { @@ -5754,7 +5948,7 @@ color: #059669; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #059669; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5764,7 +5958,7 @@ color: #d97706; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #d97706; } .p-toast .p-toast-message.p-toast-message-error { @@ -5774,9 +5968,10 @@ color: #dc2626; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #dc2626; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5807,7 +6002,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5864,7 +6059,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #fafafa; @@ -5874,7 +6069,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; } @@ -5883,23 +6078,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: none; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5923,6 +6124,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 0.375rem; @@ -5943,9 +6145,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #4f46e5; color: #ffffff; @@ -5987,6 +6191,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #3f3f46; @@ -6022,6 +6227,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 0.375rem; @@ -6036,6 +6242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6051,11 +6258,12 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; border-radius: 50%; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: none; } .p-scrolltop.p-link { @@ -6072,6 +6280,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #f4f4f5; border-radius: 0.375rem; @@ -6079,6 +6288,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #4f46e5; color: #ffffff; @@ -6111,6 +6321,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #3f3f46; @@ -6126,23 +6337,29 @@ /* Customizations to the designer theme should be defined here */ @layer primeng { .p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup { - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); } + .p-inputgroup .p-inputtext, .p-inputgroup .p-togglebutton, .p-inputgroup .p-selectbutton { box-shadow: none; } + .p-inputtext.p-invalid.p-component:enabled:focus { box-shadow: 0 0 0 1px #f0a9a7; } + .p-highlight { font-weight: 600; } + .p-button-label { font-weight: 500; } + .p-inputswitch.p-focus .p-inputswitch-slider { box-shadow: 0 0 0 2px #6366f1; } + .p-paginator .p-paginator-pages .p-paginator-page { margin-left: -1px; } @@ -6153,6 +6370,7 @@ .p-paginator .p-paginator-current { border: 0 none; } + .p-button:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6174,15 +6392,18 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ef4444, 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-checkbox .p-checkbox-box { border-radius: 0.25rem; } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #4f46e5; } diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index c2a5e77ad3f..bc1dab0fa7a 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1f2d40; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #64B5F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #2396f2; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64B5F6; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #2396f2; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #64B5F6; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #64B5F6; background: transparent; @@ -2413,6 +2521,7 @@ color: #64B5F6; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2770,6 +2896,7 @@ background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2915,12 +3042,12 @@ background: #64B5F6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #64B5F6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #43a5f4; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #2396f2; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #93cbf9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #64B5F6; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #64B5F6; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #64B5F6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #64B5F6; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #64B5F6; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #64B5F6; } diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index c2996c6a0db..9766278ea21 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1f2d40; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #81C784; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #54b358; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81C784; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #54b358; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #81C784; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #81C784; background: transparent; @@ -2413,6 +2521,7 @@ color: #81C784; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2770,6 +2896,7 @@ background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2915,12 +3042,12 @@ background: #81C784; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #81C784; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6abd6e; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #54b358; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #a7d8a9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #81C784; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #81C784; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #81C784; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #81C784; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #81C784; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #81C784; } diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 2da7459b725..ca4566ef1ab 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1f2d40; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFD54F; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #ffc50c; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFD54F; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #ffc50c; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #FFD54F; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #FFD54F; background: transparent; @@ -2413,6 +2521,7 @@ color: #FFD54F; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2770,6 +2896,7 @@ background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2915,12 +3042,12 @@ background: #FFD54F; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #FFD54F; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #ffcd2e; color: #212529; @@ -4449,6 +4624,7 @@ color: #212529; border-color: #ffc50c; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #ffe284; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #FFD54F; color: #212529; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFD54F; color: #212529; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFD54F; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #FFD54F; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #FFD54F; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #FFD54F; } diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index b1ea9a0cdba..18411e18b69 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -422,9 +435,11 @@ background: #1f2d40; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -432,19 +447,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -471,7 +490,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -481,13 +500,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.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); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -496,14 +515,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #BA68C8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -652,6 +671,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -659,10 +679,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -705,6 +727,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -744,6 +767,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -753,9 +777,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -763,6 +789,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -771,6 +798,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -811,9 +839,11 @@ background: #a241b2; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -826,12 +856,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a241b2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #BA68C8; } @@ -870,9 +903,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -880,22 +915,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -939,6 +978,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1002,6 +1042,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1014,9 +1055,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1029,60 +1072,68 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1090,9 +1141,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1100,12 +1153,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1144,9 +1199,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,45 +1236,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1227,14 +1296,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1309,9 +1381,11 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1351,9 +1425,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1361,6 +1437,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1449,6 +1526,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1458,12 +1536,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1485,6 +1566,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1492,6 +1574,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1499,6 +1582,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1536,9 +1620,11 @@ background: #a241b2; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1551,9 +1637,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1584,6 +1672,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1591,7 +1680,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1600,7 +1689,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1609,7 +1698,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1618,12 +1707,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1675,6 +1766,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1682,7 +1774,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1691,7 +1783,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1700,7 +1792,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1709,12 +1801,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1751,12 +1845,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1816,6 +1913,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1825,6 +1923,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1832,6 +1931,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #ffffff; background: #BA68C8; @@ -1943,7 +2043,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1970,6 +2070,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -1982,414 +2083,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #BA68C8; background: transparent; @@ -2413,6 +2521,7 @@ color: #BA68C8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2424,14 +2533,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2442,45 +2554,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2558,6 +2677,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2586,6 +2706,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2614,6 +2735,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2642,6 +2764,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2670,6 +2793,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2698,6 +2822,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2726,8 +2851,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2738,13 +2864,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2770,6 +2896,7 @@ background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2863,9 +2990,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2875,17 +3002,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2915,12 +3042,12 @@ background: #BA68C8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3023,6 +3150,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3061,10 +3189,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3092,6 +3222,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3111,6 +3242,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3148,6 +3280,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3176,20 +3309,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3208,14 +3351,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3253,6 +3395,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3261,6 +3404,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3299,6 +3443,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3308,9 +3453,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3466,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3380,20 +3525,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2d40; - color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3412,14 +3567,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #304562; - background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3457,6 +3611,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3465,6 +3620,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3476,19 +3632,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3545,11 +3702,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3622,6 +3779,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3761,7 +3919,7 @@ background: #BA68C8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3822,6 +3980,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3846,6 +4005,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3918,6 +4078,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3943,6 +4104,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3966,6 +4128,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4006,6 +4169,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4072,6 +4236,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4082,6 +4247,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4103,6 +4269,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4171,6 +4338,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4181,6 +4349,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4228,6 +4397,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4300,6 +4470,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4341,6 +4512,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4351,7 +4523,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4361,13 +4533,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -4381,6 +4553,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4400,6 +4573,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4439,6 +4613,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #b052c0; color: #ffffff; @@ -4449,6 +4624,7 @@ color: #ffffff; border-color: #a241b2; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4480,6 +4656,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4527,7 +4704,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4552,7 +4729,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4566,6 +4743,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4589,31 +4767,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4672,7 +4851,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4697,7 +4876,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4755,9 +4934,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4794,7 +4974,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4819,7 +4999,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4853,6 +5033,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4891,7 +5072,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4922,7 +5103,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4947,7 +5128,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4964,6 +5145,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5138,7 +5320,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5163,7 +5345,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5203,6 +5385,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5245,7 +5428,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5259,7 +5442,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5270,7 +5453,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5317,6 +5500,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5361,6 +5545,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5431,6 +5616,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #cf95d9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5481,7 +5667,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5495,7 +5681,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5506,7 +5692,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5520,6 +5706,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5575,6 +5762,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5663,6 +5851,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5713,7 +5902,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5723,7 +5912,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5733,7 +5922,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5743,9 +5932,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5776,7 +5966,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5833,7 +6023,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5843,7 +6033,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5852,23 +6042,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5892,6 +6088,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5912,9 +6109,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5956,6 +6155,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5991,6 +6191,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6005,6 +6206,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6020,6 +6222,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6041,6 +6244,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6048,6 +6252,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #BA68C8; color: #ffffff; @@ -6080,6 +6285,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6097,12 +6303,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #BA68C8; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #BA68C8; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #BA68C8; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #BA68C8; } diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 00b5763e567..84fc1476491 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -53,28 +53,32 @@ font-family: "Poppins"; font-style: normal; font-weight: 300; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-regular - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-600 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-700 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfd; @@ -302,32 +306,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.3s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #f78c79; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -339,12 +351,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -361,6 +376,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -407,6 +423,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } + .p-autocomplete-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -448,9 +465,11 @@ background: #161d21; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f78c79; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -458,19 +477,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.607rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f78c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + .p-datepicker { padding: 0.5rem; background: #161d21; @@ -497,7 +520,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -507,13 +530,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -522,14 +545,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9eade6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -678,6 +701,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -685,10 +709,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.607rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -731,6 +757,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f78c79; } + .p-cascadeselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -770,6 +797,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #263238; } @@ -779,9 +807,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #263238; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f78c79; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -789,6 +819,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -797,6 +828,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -837,9 +869,11 @@ background: #7f93de; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f78c79; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #263238; } @@ -852,12 +886,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #7f93de; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f78c79; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2d3e44; } @@ -896,9 +933,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f78c79; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -906,22 +945,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #161d21; border: 1px solid #263238; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #0e1315; border: 2px solid #263238; @@ -965,6 +1008,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f78c79; } + .p-dropdown-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1028,6 +1072,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #263238; } @@ -1040,9 +1085,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f78c79; } + .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1055,60 +1102,68 @@ .p-inputgroup-addon:last-child { border-right: 2px solid #263238; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.857rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f78c79; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1116,9 +1171,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f78c79; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1126,12 +1183,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.607rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.607rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1170,9 +1229,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8fa0e2; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f78c79; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1205,45 +1266,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.3s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f78c79; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #263238; } @@ -1253,14 +1326,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #263238; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1335,9 +1411,11 @@ box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f78c79; } + .p-multiselect { background: #0e1315; border: 2px solid #263238; @@ -1377,9 +1455,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1387,6 +1467,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-multiselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1475,6 +1556,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #263238; } @@ -1484,12 +1566,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #263238; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f78c79; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f78c79; } + .p-password-panel { padding: 1rem; background: #161d21; @@ -1511,6 +1596,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #cede9c; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1518,6 +1604,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1525,6 +1612,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1562,9 +1650,11 @@ background: #7f93de; color: #121212; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f78c79; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #263238; } @@ -1577,9 +1667,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7f93de; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1610,6 +1702,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f88c79; } + .p-selectbutton .p-button { background: #161d21; border: 2px solid #263238; @@ -1617,7 +1710,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1626,7 +1719,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1635,7 +1728,7 @@ color: #9eade6; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #9eade6; } .p-selectbutton .p-button.p-highlight:hover { @@ -1644,12 +1737,14 @@ color: #9eade6; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #9eade6; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f78c79; } + .p-slider { background: #263238; border: 0 none; @@ -1701,6 +1796,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.3s; } + .p-togglebutton.p-button { background: #161d21; border: 2px solid #263238; @@ -1708,7 +1804,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1717,7 +1813,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1726,7 +1822,7 @@ color: #9eade6; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #9eade6; } .p-togglebutton.p-button.p-highlight:hover { @@ -1735,12 +1831,14 @@ color: #9eade6; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #9eade6; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f78c79; } + .p-treeselect { background: #0e1315; border: 2px solid #263238; @@ -1777,12 +1875,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f78c79; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1842,6 +1943,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #263238; } @@ -1851,6 +1953,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #263238; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1858,6 +1961,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-button { color: #121212; background: #9eade6; @@ -1969,7 +2073,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1996,6 +2100,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2008,414 +2113,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #0e1315; background: #b4bfcd; border: 1px solid #b4bfcd; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #9dabbe; color: #0e1315; border-color: #9dabbe; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 1px #e1e5eb; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #8698ae; color: #0e1315; border-color: #8698ae; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b4bfcd; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(180, 191, 205, 0.04); color: #b4bfcd; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(180, 191, 205, 0.16); color: #b4bfcd; border: 2px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b4bfcd; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(180, 191, 205, 0.04); border-color: transparent; color: #b4bfcd; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(180, 191, 205, 0.16); border-color: transparent; color: #b4bfcd; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #35a4cc; border: 1px solid #35a4cc; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #2f94b9; color: #ffffff; border-color: #2f94b9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #aedbeb; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #2984a4; color: #ffffff; border-color: #2984a4; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(53, 164, 204, 0.16); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #35a4cc; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); border-color: transparent; color: #35a4cc; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(53, 164, 204, 0.16); border-color: transparent; color: #35a4cc; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #0e1315; background: #cede9c; border: 1px solid #cede9c; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #c0d580; color: #0e1315; border-color: #c0d580; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ebf2d7; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #b2cb63; color: #0e1315; border-color: #b2cb63; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #cede9c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 222, 156, 0.04); color: #cede9c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 222, 156, 0.16); color: #cede9c; border: 2px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #cede9c; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 222, 156, 0.04); border-color: transparent; color: #cede9c; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 222, 156, 0.16); border-color: transparent; color: #cede9c; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #0e1315; background: #ffe08a; border: 1px solid #ffe08a; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd663; color: #0e1315; border-color: #ffd663; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fff3d0; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcb3b; color: #0e1315; border-color: #ffcb3b; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe08a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 138, 0.04); color: #ffe08a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 138, 0.16); color: #ffe08a; border: 2px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe08a; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 138, 0.04); border-color: transparent; color: #ffe08a; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 138, 0.16); border-color: transparent; color: #ffe08a; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #0e1315; background: #b09ce5; border: 1px solid #b09ce5; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #987edd; color: #0e1315; border-color: #987edd; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #dfd7f5; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7f5fd5; color: #0e1315; border-color: #7f5fd5; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #b09ce5; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 156, 229, 0.04); color: #b09ce5; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 156, 229, 0.16); color: #b09ce5; border: 2px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #b09ce5; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 156, 229, 0.04); border-color: transparent; color: #b09ce5; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 156, 229, 0.16); border-color: transparent; color: #b09ce5; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #0e1315; background: #e693a9; border: 1px solid #e693a9; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #df7491; color: #0e1315; border-color: #df7491; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f5d4dd; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #d85678; color: #0e1315; border-color: #d85678; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e693a9; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(230, 147, 169, 0.04); color: #e693a9; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(230, 147, 169, 0.16); color: #e693a9; border: 2px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e693a9; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(230, 147, 169, 0.04); border-color: transparent; color: #e693a9; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(230, 147, 169, 0.16); border-color: transparent; color: #e693a9; } + .p-button.p-button-link { color: #7f93de; background: transparent; @@ -2439,6 +2551,7 @@ color: #7f93de; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2450,14 +2563,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2468,45 +2584,52 @@ background: #263238; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2584,6 +2707,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b4bfcd; @@ -2612,6 +2736,7 @@ border-color: transparent; color: #b4bfcd; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #35a4cc; @@ -2640,6 +2765,7 @@ border-color: transparent; color: #35a4cc; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #cede9c; @@ -2668,6 +2794,7 @@ border-color: transparent; color: #cede9c; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe08a; @@ -2696,6 +2823,7 @@ border-color: transparent; color: #ffe08a; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #b09ce5; @@ -2724,6 +2852,7 @@ border-color: transparent; color: #b09ce5; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e693a9; @@ -2752,8 +2881,9 @@ border-color: transparent; color: #e693a9; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2764,13 +2894,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -2796,6 +2926,7 @@ background: rgba(158, 173, 230, 0.16); color: #9eade6; } + .p-datatable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -2889,9 +3020,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2901,17 +3032,17 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -2941,12 +3072,12 @@ background: #9eade6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #161d21; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #161d21; } .p-datatable .p-datatable-loading-icon { @@ -3049,6 +3180,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3087,10 +3219,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3118,6 +3252,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3137,6 +3272,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-column-filter-overlay { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -3174,6 +3310,7 @@ border-top: 1px solid #263238; margin: 4px 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1.5rem; border-bottom: 0 none; @@ -3202,20 +3339,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #161d21; - color: rgba(255, 255, 255, 0.87); border: 2px solid #263238; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3234,14 +3381,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 2px solid #263238; - background: #161d21; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0.5rem; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 2px solid #263238; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0 0 4px 0; @@ -3279,6 +3425,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(158, 173, 230, 0.08); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3287,6 +3434,7 @@ background: #161d21; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(158, 173, 230, 0.08); color: rgba(255, 255, 255, 0.87); @@ -3325,6 +3473,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-paginator { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3483,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3347,9 +3496,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(158, 173, 230, 0.08); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3406,20 +3555,30 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #161d21; - color: rgba(255, 255, 255, 0.87); border: 2px solid #263238; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3438,14 +3597,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 2px solid #263238; - background: #161d21; color: rgba(255, 255, 255, 0.87); padding: 0.5rem 0.5rem; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 2px solid #263238; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0 0 4px 0; @@ -3483,6 +3641,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(158, 173, 230, 0.08); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3491,6 +3650,7 @@ background: #161d21; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #9eade6; border-radius: 50%; @@ -3502,19 +3662,20 @@ background-color: #263238; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 2px solid #263238; background: #161d21; @@ -3571,11 +3732,11 @@ color: #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3648,6 +3809,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-treetable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3787,7 +3949,7 @@ background: #9eade6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #161d21; } .p-treetable .p-treetable-loading-icon { @@ -3848,6 +4010,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -3872,6 +4035,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 2px solid #263238; @@ -3944,6 +4108,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-card { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -3969,6 +4134,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #161d21; } @@ -3992,6 +4158,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 2px solid #263238; background: #161d21; @@ -4032,6 +4199,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 2px solid #263238; padding: 1rem; @@ -4098,6 +4266,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #263238; border: 0 none; @@ -4108,6 +4277,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-splitter { border: 2px solid #263238; background: #161d21; @@ -4129,6 +4299,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #263238; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.857rem; } @@ -4197,6 +4368,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #161d21; border: 2px solid #263238; @@ -4207,6 +4379,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4254,6 +4427,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4326,6 +4500,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4367,6 +4542,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #263238; } + .p-sidebar { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4377,7 +4553,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4387,13 +4563,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -4407,6 +4583,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #263238; color: rgba(255, 255, 255, 0.87); @@ -4426,6 +4603,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #263238; } + .p-fileupload .p-fileupload-buttonbar { background: #161d21; padding: 1rem; @@ -4465,6 +4643,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #8fa0e2; color: #121212; @@ -4475,6 +4654,7 @@ color: #121212; border-color: #7f93de; } + .p-breadcrumb { background: #161d21; border: 2px solid #263238; @@ -4506,6 +4686,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -4553,7 +4734,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4567,7 +4748,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4578,7 +4759,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4592,6 +4773,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4615,31 +4797,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4698,7 +4881,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4712,7 +4895,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4723,7 +4906,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4781,9 +4964,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.5rem 0.5rem; background: #161d21; @@ -4820,7 +5004,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4834,7 +5018,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4845,7 +5029,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4879,6 +5063,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #161d21; @@ -4917,7 +5102,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4948,7 +5133,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4962,7 +5147,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4973,7 +5158,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4990,6 +5175,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5164,7 +5350,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5178,7 +5364,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5189,7 +5375,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5229,6 +5415,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-slidemenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -5271,7 +5458,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5285,7 +5472,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5296,7 +5483,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5343,6 +5530,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.3s; @@ -5387,6 +5575,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #263238; @@ -5457,6 +5646,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #9eade6; } + .p-tieredmenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -5507,7 +5697,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5521,7 +5711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5532,7 +5722,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5546,6 +5736,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5601,6 +5792,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5689,6 +5881,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5739,7 +5932,7 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #0e1315; } .p-toast .p-toast-message.p-toast-message-success { @@ -5749,7 +5942,7 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #0e1315; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5759,7 +5952,7 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #0e1315; } .p-toast .p-toast-message.p-toast-message-error { @@ -5769,9 +5962,10 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #0e1315; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5802,7 +5996,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5859,7 +6053,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5869,7 +6063,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5878,23 +6072,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5918,6 +6118,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #263238; border-radius: 6px; @@ -5938,9 +6139,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #161d21; } + .p-badge { background: #9eade6; color: #121212; @@ -5982,6 +6185,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #263238; color: rgba(255, 255, 255, 0.87); @@ -6017,6 +6221,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -6031,6 +6236,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6046,6 +6252,7 @@ color: #121212; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6067,6 +6274,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6074,6 +6282,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #9eade6; color: #121212; @@ -6106,6 +6315,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -6124,16 +6334,20 @@ .p-button .p-button-label { font-weight: 600; } + .p-buttonset .p-button-label, - .p-togglebutton .p-button-label { +.p-togglebutton .p-button-label { font-weight: 400; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #9eade6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #9eade6; } + .p-panel { border: 2px solid #263238; border-radius: 6px; @@ -6144,9 +6358,11 @@ .p-panel .p-panel-content { border: 0 none; } + .p-fieldset .p-fieldset-legend { border-color: transparent; } + .p-accordion .p-accordion-toggle-icon { order: 10; margin-left: auto; @@ -6164,6 +6380,7 @@ .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { border-bottom: 0 none; } + .p-inline-message.p-inline-message-info { border-color: #a3d7e6; } @@ -6176,30 +6393,39 @@ .p-inline-message.p-inline-message-error { border-color: #e6a3b2; } + .p-inputtext:enabled:focus { box-shadow: none; } + .p-dropdown:not(.p-disabled).p-focus { box-shadow: none; } + .p-multiselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus { box-shadow: none; } + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: none; } + .p-orderlist .p-orderlist-list { border-top: 0 none; } + .p-picklist .p-picklist-list { border-top: 0 none; } + .p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down { order: 10; margin-left: auto; @@ -6218,6 +6444,7 @@ padding-bottom: calc(1rem + 2px); border-bottom: 0 none; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9eade6; } diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index d298709a6cc..bb34cdef401 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -54,28 +54,32 @@ font-family: "Poppins"; font-style: normal; font-weight: 300; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-regular - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-600 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-700 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfd; @@ -303,32 +307,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.3s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f88c79; } + .p-text-secondary { color: #898989; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -340,12 +352,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-component-overlay-enter { animation: p-component-overlay-enter-animation 150ms forwards; } + .p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; } + @keyframes p-component-overlay-enter-animation { from { background-color: transparent; @@ -362,6 +377,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -408,6 +424,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } + .p-autocomplete-panel { background: #ffffff; color: #6c6c6c; @@ -449,9 +466,11 @@ background: #ffffff; font-weight: 600; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f88c79; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -459,19 +478,23 @@ color: #898989; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #898989; right: 3.607rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f88c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -498,7 +521,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #898989; @@ -508,13 +531,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -523,14 +546,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #5472d4; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -679,6 +702,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -686,10 +710,12 @@ color: #898989; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #898989; right: 3.607rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -732,6 +758,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f88c79; } + .p-cascadeselect-panel { background: #ffffff; color: #6c6c6c; @@ -771,6 +798,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f2f2f2; } @@ -780,9 +808,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f88c79; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -790,6 +820,7 @@ color: #898989; right: 2.857rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -798,6 +829,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -838,9 +870,11 @@ background: #3c5ece; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f88c79; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f2f2; } @@ -853,12 +887,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3c5ece; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f88c79; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #cecece; } @@ -897,9 +934,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f88c79; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -907,22 +946,26 @@ color: #898989; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #585858; border: 1px solid #585858; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 2px solid #e1e1e1; @@ -966,6 +1009,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f88c79; } + .p-dropdown-panel { background: #ffffff; color: #6c6c6c; @@ -1029,6 +1073,7 @@ color: #6c6c6c; background: transparent; } + .p-input-filled .p-dropdown { background: #f2f2f2; } @@ -1041,9 +1086,11 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f88c79; } + .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1056,60 +1103,68 @@ .p-inputgroup-addon:last-child { border-right: 2px solid #e1e1e1; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.857rem; } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f88c79; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1117,9 +1172,11 @@ color: #898989; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f88c79; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1127,12 +1184,14 @@ color: #898989; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.607rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.607rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1171,9 +1230,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4868d1; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f88c79; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1206,45 +1267,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #898989; transition-duration: 0.3s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f88c79; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #898989; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #898989; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #898989; } + :-moz-placeholder { color: #898989; } + ::-moz-placeholder { color: #898989; } + :-ms-input-placeholder { color: #898989; } + .p-input-filled .p-inputtext { background-color: #f2f2f2; } @@ -1254,14 +1327,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f2f2f2; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #6c6c6c; @@ -1336,9 +1412,11 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f88c79; } + .p-multiselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -1378,9 +1456,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1388,6 +1468,7 @@ color: #898989; right: 2.857rem; } + .p-multiselect-panel { background: #ffffff; color: #6c6c6c; @@ -1476,6 +1557,7 @@ color: #6c6c6c; background: transparent; } + .p-input-filled .p-multiselect { background: #f2f2f2; } @@ -1485,12 +1567,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f88c79; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f88c79; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1512,6 +1597,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #8bae2c; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1519,6 +1605,7 @@ color: #898989; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1526,6 +1613,7 @@ color: #898989; right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1563,9 +1651,11 @@ background: #3c5ece; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f88c79; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f2f2; } @@ -1578,9 +1668,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3c5ece; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1611,6 +1703,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f88c79; } + .p-selectbutton .p-button { background: #ffffff; border: 2px solid #e1e1e1; @@ -1618,7 +1711,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #898989; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1627,7 +1720,7 @@ color: #6c6c6c; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #898989; } .p-selectbutton .p-button.p-highlight { @@ -1636,7 +1729,7 @@ color: #585858; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #585858; } .p-selectbutton .p-button.p-highlight:hover { @@ -1645,12 +1738,14 @@ color: #585858; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #585858; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f88c79; } + .p-slider { background: #ebebeb; border: 0 none; @@ -1702,6 +1797,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.3s; } + .p-togglebutton.p-button { background: #ffffff; border: 2px solid #e1e1e1; @@ -1709,7 +1805,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #898989; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1718,7 +1814,7 @@ color: #6c6c6c; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #898989; } .p-togglebutton.p-button.p-highlight { @@ -1727,7 +1823,7 @@ color: #585858; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #585858; } .p-togglebutton.p-button.p-highlight:hover { @@ -1736,12 +1832,14 @@ color: #585858; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #585858; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f88c79; } + .p-treeselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -1778,12 +1876,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f88c79; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #6c6c6c; @@ -1843,6 +1944,7 @@ color: #6c6c6c; background: transparent; } + .p-input-filled .p-treeselect { background: #f2f2f2; } @@ -1852,6 +1954,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1859,6 +1962,7 @@ color: #898989; right: 2.857rem; } + .p-button { color: #ffffff; background: #5472d4; @@ -1970,7 +2074,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1997,6 +2101,7 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } @@ -2009,414 +2114,421 @@ .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-buttonset.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #8191a6; border: 1px solid #8191a6; } .p-button.p-button-secondary:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #70829a; color: #ffffff; border-color: #70829a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cdd3db; } .p-button.p-button-secondary:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #62738a; color: #ffffff; border-color: #62738a; } .p-button.p-button-secondary.p-button-outlined, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #8191a6; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 145, 166, 0.04); color: #8191a6; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 145, 166, 0.16); color: #8191a6; border: 2px solid; } .p-button.p-button-secondary.p-button-text, - .p-buttonset.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #8191a6; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 145, 166, 0.04); border-color: transparent; color: #8191a6; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 145, 166, 0.16); border-color: transparent; color: #8191a6; } + .p-button.p-button-info, - .p-buttonset.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #35a4cc; border: 1px solid #35a4cc; } .p-button.p-button-info:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #2f94b9; color: #ffffff; border-color: #2f94b9; } .p-button.p-button-info:not(:disabled):focus, - .p-buttonset.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #aedbeb; } .p-button.p-button-info:not(:disabled):active, - .p-buttonset.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #2984a4; color: #ffffff; border-color: #2984a4; } .p-button.p-button-info.p-button-outlined, - .p-buttonset.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(53, 164, 204, 0.16); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-text, - .p-buttonset.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #35a4cc; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); border-color: transparent; color: #35a4cc; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(53, 164, 204, 0.16); border-color: transparent; color: #35a4cc; } + .p-button.p-button-success, - .p-buttonset.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #8bae2c; border: 1px solid #8bae2c; } .p-button.p-button-success:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #7d9d28; color: #ffffff; border-color: #7d9d28; } .p-button.p-button-success:not(:disabled):focus, - .p-buttonset.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #d5e7a2; } .p-button.p-button-success:not(:disabled):active, - .p-buttonset.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #6f8b23; color: #ffffff; border-color: #6f8b23; } .p-button.p-button-success.p-button-outlined, - .p-buttonset.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #8bae2c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(139, 174, 44, 0.04); color: #8bae2c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(139, 174, 44, 0.16); color: #8bae2c; border: 2px solid; } .p-button.p-button-success.p-button-text, - .p-buttonset.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #8bae2c; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(139, 174, 44, 0.04); border-color: transparent; color: #8bae2c; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(139, 174, 44, 0.16); border-color: transparent; color: #8bae2c; } + .p-button.p-button-warning, - .p-buttonset.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #ff922a; border: 1px solid #ff922a; } .p-button.p-button-warning:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ff830c; color: #ffffff; border-color: #ff830c; } .p-button.p-button-warning:not(:disabled):focus, - .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffd3aa; } .p-button.p-button-warning:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ee7400; color: #ffffff; border-color: #ee7400; } .p-button.p-button-warning.p-button-outlined, - .p-buttonset.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ff922a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 146, 42, 0.04); color: #ff922a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 146, 42, 0.16); color: #ff922a; border: 2px solid; } .p-button.p-button-warning.p-button-text, - .p-buttonset.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ff922a; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 146, 42, 0.04); border-color: transparent; color: #ff922a; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 146, 42, 0.16); border-color: transparent; color: #ff922a; } + .p-button.p-button-help, - .p-buttonset.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #7654d4; border: 1px solid #7654d4; } .p-button.p-button-help:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #633cce; color: #ffffff; border-color: #633cce; } .p-button.p-button-help:not(:disabled):focus, - .p-buttonset.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #c8bbee; } .p-button.p-button-help:not(:disabled):active, - .p-buttonset.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #5530bd; color: #ffffff; border-color: #5530bd; } .p-button.p-button-help.p-button-outlined, - .p-buttonset.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #7654d4; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(118, 84, 212, 0.04); color: #7654d4; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(118, 84, 212, 0.16); color: #7654d4; border: 2px solid; } .p-button.p-button-help.p-button-text, - .p-buttonset.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #7654d4; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(118, 84, 212, 0.04); border-color: transparent; color: #7654d4; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(118, 84, 212, 0.16); border-color: transparent; color: #7654d4; } + .p-button.p-button-danger, - .p-buttonset.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d45472; border: 1px solid #d45472; } .p-button.p-button-danger:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ce3c5e; color: #ffffff; border-color: #ce3c5e; } .p-button.p-button-danger:not(:disabled):focus, - .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #eebbc7; } .p-button.p-button-danger:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #bd3051; color: #ffffff; border-color: #bd3051; } .p-button.p-button-danger.p-button-outlined, - .p-buttonset.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d45472; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(212, 84, 114, 0.04); color: #d45472; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(212, 84, 114, 0.16); color: #d45472; border: 2px solid; } .p-button.p-button-danger.p-button-text, - .p-buttonset.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d45472; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(212, 84, 114, 0.04); border-color: transparent; color: #d45472; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(212, 84, 114, 0.16); border-color: transparent; color: #d45472; } + .p-button.p-button-link { color: #3c5ece; background: transparent; @@ -2440,6 +2552,7 @@ color: #3c5ece; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2451,14 +2564,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2469,45 +2585,52 @@ background: #585858; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2585,6 +2708,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #8191a6; @@ -2613,6 +2737,7 @@ border-color: transparent; color: #8191a6; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #35a4cc; @@ -2641,6 +2766,7 @@ border-color: transparent; color: #35a4cc; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #8bae2c; @@ -2669,6 +2795,7 @@ border-color: transparent; color: #8bae2c; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ff922a; @@ -2697,6 +2824,7 @@ border-color: transparent; color: #ff922a; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #7654d4; @@ -2725,6 +2853,7 @@ border-color: transparent; color: #7654d4; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d45472; @@ -2753,8 +2882,9 @@ border-color: transparent; color: #d45472; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #898989; @@ -2765,13 +2895,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -2797,6 +2927,7 @@ background: #ced6f1; color: #585858; } + .p-datatable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -2890,9 +3021,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #898989; @@ -2902,17 +3033,17 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.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.1rem #bbc7ee; @@ -2942,12 +3073,12 @@ background: #5472d4; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3050,6 +3181,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3088,10 +3220,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3119,6 +3253,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3138,6 +3273,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-column-filter-overlay { background: #ffffff; color: #6c6c6c; @@ -3175,6 +3311,7 @@ border-top: 1px solid #ebebeb; margin: 4px 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1.5rem; border-bottom: 0 none; @@ -3203,20 +3340,30 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: #6c6c6c; border: 2px solid #ebebeb; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } + .p-orderlist .p-orderlist-header { + color: #6c6c6c; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 600; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 600; @@ -3235,14 +3382,13 @@ color: #898989; } .p-orderlist .p-orderlist-list { - border: 2px solid #ebebeb; - background: #ffffff; color: #6c6c6c; padding: 0.5rem 0.5rem; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 2px solid #ebebeb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0 0 4px 0; @@ -3280,6 +3426,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #edf0fa; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3288,6 +3435,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #edf0fa; color: #6c6c6c; @@ -3326,6 +3474,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-paginator { background: #ffffff; color: #898989; @@ -3335,9 +3484,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #898989; @@ -3348,9 +3497,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #edf0fa; border-color: transparent; color: #6c6c6c; @@ -3407,20 +3556,30 @@ border-color: transparent; color: #6c6c6c; } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: #6c6c6c; border: 2px solid #ebebeb; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } + .p-picklist .p-picklist-header { + color: #6c6c6c; padding: 1rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 600; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 600; @@ -3439,14 +3598,13 @@ color: #898989; } .p-picklist .p-picklist-list { - border: 2px solid #ebebeb; - background: #ffffff; color: #6c6c6c; padding: 0.5rem 0.5rem; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 2px solid #ebebeb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0 0 4px 0; @@ -3484,6 +3642,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #edf0fa; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; 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); @@ -3492,6 +3651,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #5472d4; border-radius: 50%; @@ -3503,19 +3663,20 @@ background-color: #ebebeb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 2px solid #ebebeb; background: #ffffff; @@ -3572,11 +3733,11 @@ color: #585858; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #585858; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #585858; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3649,6 +3810,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-treetable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3788,7 +3950,7 @@ background: #5472d4; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3849,6 +4011,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: #6c6c6c; @@ -3873,6 +4036,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 2px solid #ebebeb; @@ -3945,6 +4109,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-card { background: #ffffff; color: #6c6c6c; @@ -3970,6 +4135,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3993,6 +4159,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 2px solid #ebebeb; background: #ffffff; @@ -4033,6 +4200,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 2px solid #ebebeb; padding: 1rem; @@ -4099,6 +4267,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f5f5f5; border: 0 none; @@ -4109,6 +4278,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-splitter { border: 2px solid #ebebeb; background: #ffffff; @@ -4130,6 +4300,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #ebebeb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.857rem; } @@ -4198,6 +4369,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #ffffff; border: 2px solid #ebebeb; @@ -4208,6 +4380,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #6c6c6c; @@ -4255,6 +4428,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4327,6 +4501,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #6c6c6c; @@ -4368,6 +4543,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #6c6c6c; @@ -4378,7 +4554,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #898989; @@ -4388,13 +4564,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -4408,6 +4584,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #585858; color: #ffffff; @@ -4427,6 +4604,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #585858; } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4466,6 +4644,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4868d1; color: #ffffff; @@ -4476,6 +4655,7 @@ color: #ffffff; border-color: #3c5ece; } + .p-breadcrumb { background: #ffffff; border: 2px solid #ebebeb; @@ -4507,6 +4687,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #898989; } + .p-contextmenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4554,7 +4735,7 @@ color: #6c6c6c; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4568,7 +4749,7 @@ color: #6c6c6c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4579,7 +4760,7 @@ color: #6c6c6c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-contextmenu .p-menuitem-separator { @@ -4593,6 +4774,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4616,31 +4798,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4699,7 +4882,7 @@ color: #6c6c6c; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4713,7 +4896,7 @@ color: #6c6c6c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4724,7 +4907,7 @@ color: #6c6c6c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-megamenu .p-megamenu-panel { @@ -4782,9 +4965,10 @@ color: #6c6c6c; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } + .p-menu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4821,7 +5005,7 @@ color: #6c6c6c; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4835,7 +5019,7 @@ color: #6c6c6c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4846,7 +5030,7 @@ color: #6c6c6c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menu.p-menu-overlay { @@ -4880,6 +5064,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f5f5f5; @@ -4918,7 +5103,7 @@ color: #6c6c6c; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4949,7 +5134,7 @@ color: #6c6c6c; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4963,7 +5148,7 @@ color: #6c6c6c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4974,7 +5159,7 @@ color: #6c6c6c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menubar .p-submenu-list { @@ -4991,6 +5176,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5165,7 +5351,7 @@ color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5179,7 +5365,7 @@ color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5190,7 +5376,7 @@ color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5230,6 +5416,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-slidemenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -5272,7 +5459,7 @@ color: #6c6c6c; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5286,7 +5473,7 @@ color: #6c6c6c; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5297,7 +5484,7 @@ color: #6c6c6c; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-slidemenu.p-slidemenu-overlay { @@ -5344,6 +5531,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.3s; @@ -5388,6 +5576,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #ebebeb; @@ -5458,6 +5647,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem #bbc7ee; } + .p-tieredmenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -5508,7 +5698,7 @@ color: #6c6c6c; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5522,7 +5712,7 @@ color: #6c6c6c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5533,7 +5723,7 @@ color: #6c6c6c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-tieredmenu .p-menuitem-separator { @@ -5547,6 +5737,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5602,6 +5793,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5690,6 +5882,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5740,7 +5933,7 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #585858; } .p-toast .p-toast-message.p-toast-message-success { @@ -5750,7 +5943,7 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #585858; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5760,7 +5953,7 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #585858; } .p-toast .p-toast-message.p-toast-message-error { @@ -5770,9 +5963,10 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #585858; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5803,7 +5997,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5860,7 +6054,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f5f5f5; @@ -5870,7 +6064,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f5f5f5; } @@ -5879,23 +6073,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } + .p-image-preview-container:hover > .p-image-preview-indicator { background-color: rgba(0, 0, 0, 0.5); } + .p-image-toolbar { padding: 1rem; } + .p-image-action.p-link { color: #f8f9fa; background-color: transparent; @@ -5919,6 +6119,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #ebebeb; border-radius: 6px; @@ -5939,9 +6140,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #5472d4; color: #ffffff; @@ -5983,6 +6186,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #ebebeb; color: #6c6c6c; @@ -6018,6 +6222,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -6032,6 +6237,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6047,6 +6253,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6068,6 +6275,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #ebebeb; border-radius: 6px; @@ -6075,6 +6283,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #5472d4; color: #ffffff; @@ -6107,6 +6316,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #6c6c6c; @@ -6125,16 +6335,20 @@ .p-button .p-button-label { font-weight: 600; } + .p-buttonset .p-button-label, - .p-togglebutton .p-button-label { +.p-togglebutton .p-button-label { font-weight: 400; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #5472d4; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #5472d4; } + .p-panel { border: 2px solid #ebebeb; border-radius: 6px; @@ -6145,9 +6359,11 @@ .p-panel .p-panel-content { border: 0 none; } + .p-fieldset .p-fieldset-legend { border-color: transparent; } + .p-accordion .p-accordion-toggle-icon { order: 10; margin-left: auto; @@ -6165,6 +6381,7 @@ .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { border-bottom: 0 none; } + .p-inline-message.p-inline-message-info { border-color: #e1f2f7; } @@ -6177,30 +6394,39 @@ .p-inline-message.p-inline-message-error { border-color: #f7e1e6; } + .p-inputtext:enabled:focus { box-shadow: none; } + .p-dropdown:not(.p-disabled).p-focus { box-shadow: none; } + .p-multiselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus { box-shadow: none; } + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: none; } + .p-orderlist .p-orderlist-list { border-top: 0 none; } + .p-picklist .p-picklist-list { border-top: 0 none; } + .p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down { order: 10; margin-left: auto; @@ -6219,6 +6445,7 @@ padding-bottom: calc(1rem + 2px); border-bottom: 0 none; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #5472d4; } From 9f711f5cd86079f25c87398788b266c55366e7be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 15:03:37 +0300 Subject: [PATCH 19/38] refactor on https://github.com/primefaces/primeng/pull/14628 --- src/app/components/dropdown/dropdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index e8f1ebe70b2..ff8ca9ff571 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -1216,7 +1216,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.updateModel(value, event); setTimeout(() => { this.onChange.emit({ originalEvent: event, value: value }); - }); + }, 1); !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show(); } From 612ddb5d7c53c696f4f316173cabbb36e7af3dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 16:15:22 +0300 Subject: [PATCH 20/38] Fixed #14655 --- src/app/components/dropdown/dropdown.ts | 26 ++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index ff8ca9ff571..8d6a0917e87 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -848,6 +848,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV listId: Nullable; + clicked = signal(false); + get emptyMessageLabel(): string { return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE); } @@ -1199,6 +1201,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.overlayVisible ? this.hide(true) : this.show(true); } this.onClick.emit(event); + this.clicked.set(true); this.cd.detectChanges(); } @@ -1226,7 +1229,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV */ public show(isFocus?) { this.overlayVisible = true; - const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1; + const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex(); this.focusedOptionIndex.set(focusedOptionIndex); if (isFocus) { @@ -1279,6 +1282,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV public hide(isFocus?) { this.overlayVisible = false; this.focusedOptionIndex.set(-1); + this.clicked.set(false); + this.searchValue = ''; if (this.filter && this.resetFilterOnHide) { this.resetFilter(); @@ -1396,6 +1401,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV break; } + + this.clicked.set(false); } onFilterKeyDown(event) { @@ -1443,10 +1450,18 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV } onArrowDownKey(event: KeyboardEvent) { - const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex(); - this.changeFocusedOptionIndex(event, optionIndex); + if (!this.overlayVisible) { + this.show(); + this.editable && this.changeFocusedOptionIndex(event, this.findSelectedOptionIndex()); + } else { + const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.clicked() ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex(); + + this.changeFocusedOptionIndex(event, optionIndex); + } + // const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex(); + // this.changeFocusedOptionIndex(event, optionIndex); - !this.overlayVisible && this.show(); + // !this.overlayVisible && this.show(); event.preventDefault(); } @@ -1554,7 +1569,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.overlayVisible && this.hide(); event.preventDefault(); } else { - const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.findLastFocusedOptionIndex(); + const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.clicked() ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex(); this.changeFocusedOptionIndex(event, optionIndex); @@ -1629,6 +1644,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV onEnterKey(event) { if (!this.overlayVisible) { + this.focusedOptionIndex.set(-1); this.onArrowDownKey(event); } else { if (this.focusedOptionIndex() !== -1) { From cad1a82c31cc5fb671e84b458bcff3df4ef707b1 Mon Sep 17 00:00:00 2001 From: Nithin V Date: Thu, 1 Feb 2024 20:26:50 +0530 Subject: [PATCH 21/38] fix #13332 tabview with scrillable exception error --- src/app/components/tabview/tabview.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/components/tabview/tabview.ts b/src/app/components/tabview/tabview.ts index 8b5696562f5..41e7aacb279 100755 --- a/src/app/components/tabview/tabview.ts +++ b/src/app/components/tabview/tabview.ts @@ -797,7 +797,10 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B updateScrollBar(index: number) { let tabHeader = (this.navbar as ElementRef).nativeElement.children[index]; - tabHeader.scrollIntoView({ block: 'nearest' }); + + if (tabHeader) { + tabHeader.scrollIntoView({ block: 'nearest' }); + } } updateButtonState() { From 3373c50a4345fdc49c4bf1096660b45082ab29bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 19:06:08 +0300 Subject: [PATCH 22/38] Fixed #14641 | Update default wrong default value for autoOptionFocus --- src/app/components/autocomplete/autocomplete.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 28c7e96b392..faa6ba7a6b7 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -583,7 +583,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * Whether to focus on the first visible or selected element when the overlay panel is shown. * @group Props */ - @Input() autoOptionFocus: boolean | undefined = true; + @Input() autoOptionFocus: boolean | undefined = false; /** * When enabled, the focused option is selected. * @group Props @@ -1622,4 +1622,3 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr declarations: [AutoComplete] }) export class AutoCompleteModule {} - From ed795b730a4ae63248d299d678390f1a6ab50e8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 20:02:23 +0300 Subject: [PATCH 23/38] Fixed #14512 --- src/app/components/dragdrop/dragdrop.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/components/dragdrop/dragdrop.ts b/src/app/components/dragdrop/dragdrop.ts index 07fa916ec69..5a3608d472a 100755 --- a/src/app/components/dragdrop/dragdrop.ts +++ b/src/app/components/dragdrop/dragdrop.ts @@ -251,8 +251,10 @@ export class Droppable implements AfterViewInit, OnDestroy { dragLeave(event: DragEvent) { event.preventDefault(); - DomHandler.removeClass(this.el.nativeElement, 'p-draggable-enter'); - this.onDragLeave.emit(event); + if (!this.el.nativeElement.contains(event.relatedTarget)) { + DomHandler.removeClass(this.el.nativeElement, 'p-draggable-enter'); + this.onDragLeave.emit(event); + } } allowDrop(event: DragEvent): boolean { From 600e8317e3e5747c773c1fb2483f020c97cea391 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 20:20:21 +0300 Subject: [PATCH 24/38] Update apidoc --- src/app/showcase/doc/apidoc/index.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 6c00dc35e36..55e096e9ea3 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -3911,7 +3911,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "true", + "default": "false", "description": "Whether to focus on the first visible or selected element when the overlay panel is shown." }, { @@ -21992,7 +21992,7 @@ "optional": false, "readonly": false, "type": "string", - "default": "960px", + "default": "640px", "description": "The breakpoint to define the maximum width boundary when using stack responsive layout." }, { From 8f974a7bb9b68d5236fb620aac92b082ea33036c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 20:27:55 +0300 Subject: [PATCH 25/38] Set new version & update changelog --- CHANGELOG.md | 24 +++++++++++++++++++ package.json | 2 +- src/app/components/package.json | 2 +- src/app/showcase/data/versions.json | 2 +- .../layout/doc/codeeditor/templates.ts | 2 +- 5 files changed, 28 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ec5ba29eb9..f4bb2225629 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,28 @@ # Changelog +## [17.5.0](https://github.com/primefaces/primeng/tree/17.5.0) (2024-02-01) + +[Full Changelog](https://github.com/primefaces/primeng/compare/17.4.0...17.5.0) + +**Implemented New Features and Enhancements:** +- AutoComplete | Description in the accessibility section for tab not working [\#14641](https://github.com/primefaces/primeng/issues/14641) + +**Fixed bugs:** +- Component: InputNumber does not validate max on blur [\#14630](https://github.com/primefaces/primeng/issues/14630) +- p-dropdown: Filtering all items incorrectly clears the dropdown's selected value [\#14596](https://github.com/primefaces/primeng/issues/14596) +- Component: Dropdown [\#14367](https://github.com/primefaces/primeng/issues/14367) +- paginator missing p-paginator-top/bottom class [\#14679](https://github.com/primefaces/primeng/issues/14679) +- Component: Placeholder not working in dropdown Reactive Forms and Template [\#14679](https://github.com/primefaces/primeng/issues/14679) +- TabView with scrollable throws an exception [\#13332](https://github.com/primefaces/primeng/issues/13332) +- Component: TreeTable, dragging over table cells [\#14512](https://github.com/primefaces/primeng/issues/14512) +- p-calendar: validation is triggered before calendar is even touched [\#14542](https://github.com/primefaces/primeng/issues/14542) +- Referencing closed thread -> Responsive Stack and add [scrollable]="true" not working responsive stack #11331 [\#14667](https://github.com/primefaces/primeng/issues/14667) +- Table: built-in Ctrl+A errors when "rows" parameter is defined [\#14634](https://github.com/primefaces/primeng/issues/14634) +- p-autocomplete: maxlength doesn't work anymore [\#14595](https://github.com/primefaces/primeng/issues/14595) +- Dropdown: autoOptionFocus property not working [\#14655](https://github.com/primefaces/primeng/issues/14655) +- Dropdown: Unable to type in editable Dropdowns when filtering options onChange and current value is an option [\#14556](https://github.com/primefaces/primeng/issues/14556) +- p-MultiSelect: Clear Button does not work [\#14585](https://github.com/primefaces/primeng/issues/14585) +- Calendar: Calendar CSS breaks other Components [\#14606](https://github.com/primefaces/primeng/issues/14606) + ## [17.4.0](https://github.com/primefaces/primeng/tree/17.4.0) (2024-01-24) [Full Changelog](https://github.com/primefaces/primeng/compare/17.3.3...17.4.0) diff --git a/package.json b/package.json index 9012fc60b3a..106cabebb3d 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.4.0", + "version": "17.5.0", "license": "SEE LICENSE IN LICENSE.md", "scripts": { "ng": "ng", diff --git a/src/app/components/package.json b/src/app/components/package.json index 17bb27ba19a..cee5282f334 100644 --- a/src/app/components/package.json +++ b/src/app/components/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.4.0", + "version": "17.5.0", "repository": { "type": "git", "url": "https://github.com/primefaces/primeng" diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json index f1c010ab0e2..c7ff02b2b20 100644 --- a/src/app/showcase/data/versions.json +++ b/src/app/showcase/data/versions.json @@ -1,6 +1,6 @@ [ { - "version": "v17.4.0", + "version": "v17.5.0", "name": "v17", "url": "https://primeng.org" }, diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index ca0848b599e..ef1df9cfeb4 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -15,7 +15,7 @@ export interface Props { const app_dependencies = pkg ? pkg.devDependencies : {}; const PrimeNG = { - version: '17.4.0', + version: '17.5.0', description: 'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.' }; From e5cc49b289a8fe65f9e070de02e31341abffd022 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 1 Feb 2024 20:29:35 +0300 Subject: [PATCH 26/38] Code format --- src/app/components/accordion/accordion.ts | 2 +- src/app/components/calendar/calendar.ts | 3 +- .../components/paginator/paginator.spec.ts | 8 ++--- src/app/components/table/table.spec.ts | 36 ++++++++----------- src/app/components/table/table.ts | 5 ++- 5 files changed, 25 insertions(+), 29 deletions(-) diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts index 327f039a688..73941bfe8dc 100755 --- a/src/app/components/accordion/accordion.ts +++ b/src/app/components/accordion/accordion.ts @@ -308,7 +308,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy { case 'Enter': case 'Space': this.toggle(event); - event.preventDefault(); // ??? + event.preventDefault(); break; default: break; diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index ac56ab164cf..311bf6f2ecb 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -1581,8 +1581,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { formattedValue += ' ' + this.formatTime(date); } } - } - else if (this.dataType === 'string') { + } else if (this.dataType === 'string') { formattedValue = date; } diff --git a/src/app/components/paginator/paginator.spec.ts b/src/app/components/paginator/paginator.spec.ts index 5fd59a13c39..be276d46d8c 100755 --- a/src/app/components/paginator/paginator.spec.ts +++ b/src/app/components/paginator/paginator.spec.ts @@ -36,11 +36,11 @@ describe('Paginator', () => { }); it('should apply styleClass', () => { - fixture.componentRef.setInput('styleClass', 'p-paginator-bottom'); - fixture.detectChanges(); + fixture.componentRef.setInput('styleClass', 'p-paginator-bottom'); + fixture.detectChanges(); - const paginatorElement = fixture.debugElement.query(By.css('.p-paginator')); - expect(paginatorElement?.nativeElement).toHaveClass('p-paginator-bottom'); + const paginatorElement = fixture.debugElement.query(By.css('.p-paginator')); + expect(paginatorElement?.nativeElement).toHaveClass('p-paginator-bottom'); }); it('should use alwaysShow false', () => { diff --git a/src/app/components/table/table.spec.ts b/src/app/components/table/table.spec.ts index 01d55faed61..797aa12e639 100755 --- a/src/app/components/table/table.spec.ts +++ b/src/app/components/table/table.spec.ts @@ -478,30 +478,24 @@ describe('Table', () => { }); it('should pass top/botton styleClass to paginators', () => { - table.paginator = true; - table.paginatorPosition = 'both'; - fixture.detectChanges(); - - const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); - const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator); - expect(paginators).toEqual([ - jasmine.objectContaining({ styleClass: 'p-paginator-top' }), - jasmine.objectContaining({ styleClass: 'p-paginator-bottom' }) - ]); + table.paginator = true; + table.paginatorPosition = 'both'; + fixture.detectChanges(); + + const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); + const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator); + expect(paginators).toEqual([jasmine.objectContaining({ styleClass: 'p-paginator-top' }), jasmine.objectContaining({ styleClass: 'p-paginator-bottom' })]); }); it('should pass paginatorStyleClass to paginators', () => { - table.paginator = true; - table.paginatorPosition = 'both'; - table.paginatorStyleClass = 'p-paginator-custom'; - fixture.detectChanges(); - - const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); - const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator); - expect(paginators).toEqual([ - jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-top' }), - jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-bottom' }) - ]); + table.paginator = true; + table.paginatorPosition = 'both'; + table.paginatorStyleClass = 'p-paginator-custom'; + fixture.detectChanges(); + + const basicTableElement = fixture.debugElement.query(By.css('.basicTable')); + const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator); + expect(paginators).toEqual([jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-top' }), jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-bottom' })]); }); it('should use custom filter and show 2 items', fakeAsync(() => { diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 7576e004cbf..9f8c0fed217 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -3028,7 +3028,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } getPaginatorStyleClasses(className?: string) { - return [this.paginatorStyleClass, className].filter(c => !!c).join(' ').trim(); + return [this.paginatorStyleClass, className] + .filter((c) => !!c) + .join(' ') + .trim(); } } From f06c2003a9c27ce9a26eb98bce8d4928b0889c46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:32:49 +0300 Subject: [PATCH 27/38] Merge master --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 106cabebb3d..86941ae4ea6 100755 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "type": "git", "url": "https://github.com/primefaces/primeng.git" }, + "type": "module", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", "@angular-eslint/eslint-plugin": "17.1.1", From 869bb4140d375540ea88f7cbc97901f4ae9435d4 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Fri, 2 Feb 2024 01:59:27 +0300 Subject: [PATCH 28/38] Update roadmap --- .../pages/roadmap/roadmap.component.html | 166 ++++++++---------- 1 file changed, 76 insertions(+), 90 deletions(-) diff --git a/src/app/showcase/pages/roadmap/roadmap.component.html b/src/app/showcase/pages/roadmap/roadmap.component.html index 967465a6a7c..c3dc65c67a9 100644 --- a/src/app/showcase/pages/roadmap/roadmap.component.html +++ b/src/app/showcase/pages/roadmap/roadmap.component.html @@ -2,11 +2,8 @@

Roadmap

- At PrimeTek, we - are passionate about improving PrimeNG and - would like to share our ideas for 2023 with the community. These are planned to be implemented in - parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeNG - PRO support. + At PrimeTek, we are passionate about improving PrimeNG and would like to share our ideas for 2024 with the community. These are planned to be + implemented in parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeNG PRO support.

@@ -21,182 +18,171 @@

Roadmap

-
- COMPONENTS
+
COMPONENTS
-

Typings

-

Improve codebase to utilize more strict types.

+

Unstyled Mode

+

Initiate unstyled mode for a set of components.

-
+
-
-
-

Accessibility - I

-

Initiate WCAG Level AA compliance using PrimeVue as the - reference implementation.

-
-
-
-
-
-
-
-

Accessibility - II

-

Finalize WCAG Level AA compliance for all components with - screen reader and keyboard support based on community feedback and audit tools.

+

Pass Through Props

+

Implement pass through properties for a set of components.

-
+
-

New Design Tokens

-

Introduce new design tokens for styled mode.

+

New Components

+

Layout, Typography, MeterGroup, Drawer, Stepper...

-
+
-

CSS Variables

-

Implement design tokens as CSS variables instead of SCSS. -

+

New Styled Mode

+

Move theming into core to replace sass repo..

-

New Styled Mode

-

Move theming into core to replace external sass repo.

+

CSS Variables

+

Implement figma design tokens as CSS variables instead of SCSS.

-

Pass Through Props

-

Initate the implementation of Pass Through Props to - provide advanced control over component internals.

+

RTL Mode

+

RTL support for the UI components.

+
+
-

Unstyled Mode

-

Implementation of the Unstyled Mode to support libraries - like Tailwind.

+

Advanced Components

+

Sheet, Event Calendar.

-
-
-
- Figma UI Kit
-
-
-

Tokens

-

Initiated support for Figma Tokens.

+
+

Advanced Components

+

Gantt Chart, Flow Chart.

-
+
+
+
+
FIGMA UI Kit
-

Tokens

-

Initial release of Figma Tokens.

+

New Figma Tokens

+

Design tokens to sync with the new styled mode.

-
+
-

Tokens

-

Sync new design tokens.

+

Figma to Theme API

+

Build the infrastructure to generate themes from Figma.

+
+
-
- SHOWCASE
-
-
-

Demos

-

Standalone demos for each component feature instead - of one demo page that demonstrates multiple features.

-
-
-
-
-
+
SHOWCASE

Documentation

-

New component API docs generated by TSDoc.

+

Add new demos and documentation.

-
+
+
-
- PrimeBlocks
-
-
-
+
PRIMEBLOCKS

Blocks Update

-

More UI Blocks.

+

Create new blocks.

+
+
+
+
+
+

Blocks Website

+

New design for blocks application

+
+
+
+
+
+

Tailwind Blocks

+

Port the entire Blocks to Tailwind.

+
+
+

Online App

+

Implement a SaaS app to access the blocks instead of an offline download.

+
+
+
+
+
+
+
-
- Designer
+
DESIGN
-

Open Source Designer

-

Open source theme designer to make it free to use.

+

Aura UI Theme

+

Brand new default theme with a modern and attractive design.

-
+
-
-
-

New UI Based Theme Editor

-

Advanced Theme Editor with full control over the Theming - API.

+

Theme Editor

+

Advanced Theme Editor App with full control over the new Styled Theming API.

+
+
- \ No newline at end of file + From 49fc81f383638b3f92dcb6c13fad0f09f42c6903 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Fri, 2 Feb 2024 09:58:21 +0300 Subject: [PATCH 29/38] Fixed #14693 - Checkbox | Disabled property does not work when it's used with formControlName --- src/app/components/checkbox/checkbox.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts index 8ad9309aef4..23948976908 100755 --- a/src/app/components/checkbox/checkbox.ts +++ b/src/app/components/checkbox/checkbox.ts @@ -293,7 +293,9 @@ export class Checkbox implements ControlValueAccessor { } setDisabledState(val: boolean): void { - this.disabled = val; + setTimeout(() => { + this.disabled = val; + }); this.cd.markForCheck(); } From b66de46bc4767f69570939790752713137c77671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:33:56 +0300 Subject: [PATCH 30/38] Fix typo --- src/app/showcase/pages/landing/footersection.component.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/app/showcase/pages/landing/footersection.component.ts b/src/app/showcase/pages/landing/footersection.component.ts index 055e0cf7eca..6e8f45f98ed 100644 --- a/src/app/showcase/pages/landing/footersection.component.ts +++ b/src/app/showcase/pages/landing/footersection.component.ts @@ -14,9 +14,7 @@ import { RouterModule } from '@angular/router'; From db399262ffd97d2dd6577f1175312c303eb23348 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Fri, 2 Feb 2024 18:33:23 +0300 Subject: [PATCH 31/38] Fixed #14702 --- src/app/components/dropdown/dropdown.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index fe8225c0aac..f376caa9c0f 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -1781,8 +1781,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV public focus(): void { this.applyFocus(); } - - clear(event: Event) { + /** + * Clears the model. + * @group Method + */ + public clear(event?: Event) { this.updateModel(null, event); this.clearEditableLabel(); this.onChange.emit({ originalEvent: event, value: this.value }); From 14e822bcc63f0641b7cffef29e6f8d5ef32db23d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 5 Feb 2024 13:57:26 +0300 Subject: [PATCH 32/38] Fixed #14682 - Dropdown | TypeError: option.toLowerCase is not a function --- src/app/components/dropdown/dropdown.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 8ccd5efece9..6e860a04806 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -901,9 +901,15 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const _filterBy = this.filterBy || this.optionLabel; const filteredOptions = - !_filterBy && !this.filterFields && !this.optionValue - ? this.options.filter((option) => option.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1) - : this.filterService.filter(options, this.searchFields(), this._filterValue(), this.filterMatchMode, this.filterLocale); + !_filterBy && !this.filterFields && !this.optionValue + ? this.options.filter((option) => { + if (typeof option === 'object' && option.label) { + return option.label.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1; + } + return option.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1; + }) + : this.filterService.filter(options, this.searchFields(), this._filterValue(), this.filterMatchMode, this.filterLocale); + if (this.group) { const optionGroups = this.options || []; const filtered = []; From a823cbc5bab0c14aa3e654ee5fba755a6e1124c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 5 Feb 2024 14:06:38 +0300 Subject: [PATCH 33/38] refactor --- src/app/components/dropdown/dropdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 6e860a04806..156fe531961 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -903,7 +903,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const filteredOptions = !_filterBy && !this.filterFields && !this.optionValue ? this.options.filter((option) => { - if (typeof option === 'object' && option.label) { + if (option.label) { return option.label.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1; } return option.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1; From caeae326f496a5f3cfe17a46ae1f2fedf22cc283 Mon Sep 17 00:00:00 2001 From: Cr3aHal0 Date: Mon, 5 Feb 2024 23:02:40 +0100 Subject: [PATCH 34/38] fix(14715): selecting a falsy value (such as '0' or 0) should not show placeholder (especially when such option has a label) --- src/app/components/dropdown/dropdown.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index f376caa9c0f..9febc164c40 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -931,7 +931,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const selectedOptionIndex = this.findSelectedOptionIndex(); return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel'; } - return this.modelValue() ? this.getOptionLabel(this.selectedOption) : this.placeholder || 'p-emptylabel'; + const modelValue = this.modelValue(); + return modelValue !== undefined && modelValue !== null ? this.getOptionLabel(this.selectedOption) : this.placeholder || 'p-emptylabel'; }); selectedOption: any; From e60c04d617b981732d621a23a557dfcbf35072f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 6 Feb 2024 11:40:00 +0300 Subject: [PATCH 35/38] Remove stateful config --- src/app/showcase/layout/app.component.ts | 12 ------------ src/app/showcase/service/appconfigservice.ts | 1 - 2 files changed, 13 deletions(-) diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 0e82afa168e..ae0c1a4f495 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -43,18 +43,6 @@ export class AppComponent implements OnInit { ngOnInit(): void { this.primeng.ripple = true; - if (isPlatformBrowser(this.platformId)) { - this.checkAppState(); - } - } - - checkAppState() { - const stored = localStorage.getItem('layout-config'); - let _config!: AppConfig; - if (stored) { - _config = JSON.parse(stored) as AppConfig; - this.configService.config.set(_config); - } } injectScripts() { diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts index 1047c696b9c..031cec96f87 100644 --- a/src/app/showcase/service/appconfigservice.ts +++ b/src/app/showcase/service/appconfigservice.ts @@ -53,7 +53,6 @@ export class AppConfigService { config.tableTheme = !config.darkMode ? config.tableTheme.replace('light', 'dark') : config.tableTheme.replace('dark', 'light'); this._config = { ...config }; this.configUpdate.next(this.config()); - localStorage.setItem('layout-config', JSON.stringify(config)); } showMenu() { From 77d0b3cf967e04ba23857b7a66eed2078fa17ca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 6 Feb 2024 15:46:12 +0300 Subject: [PATCH 36/38] Fixed #14729 --- src/app/components/scroller/scroller.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/components/scroller/scroller.ts b/src/app/components/scroller/scroller.ts index ec1b33bcb18..fd2bf7a5cb4 100644 --- a/src/app/components/scroller/scroller.ts +++ b/src/app/components/scroller/scroller.ts @@ -139,6 +139,8 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD } set items(val: any[] | undefined | null) { this._items = val; + this.init(); + this.calculateAutoSize(); } /** * The height/width of item according to orientation. From f0d4e232fc9a6b5eb7ed2ee286a8c3bbda57fbd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 6 Feb 2024 16:55:09 +0300 Subject: [PATCH 37/38] Fixed #14731 - Update scrollToIndex method --- src/app/components/scroller/scroller.ts | 50 ++++++++++++++----------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/app/components/scroller/scroller.ts b/src/app/components/scroller/scroller.ts index fd2bf7a5cb4..4b097a42945 100644 --- a/src/app/components/scroller/scroller.ts +++ b/src/app/components/scroller/scroller.ts @@ -660,35 +660,41 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD } scrollTo(options: ScrollToOptions) { - this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0; + // this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0; this.elementViewChild?.nativeElement?.scrollTo(options); } - scrollToIndex(index: number, behavior: ScrollBehavior = 'auto') { - const { numToleratedItems } = this.calculateNumItems(); - const contentPos = this.getContentPosition(); - const calculateFirst = (_index = 0, _numT: number) => (_index <= _numT ? 0 : _index); - const calculateCoord = (_first: number, _size: number, _cpos: number) => _first * _size + _cpos; - const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior }); - let newFirst: any = 0; + scrollToIndex(index: number | number[], behavior: ScrollBehavior = 'auto') { + const valid = this.both ? (index as number[]).every((i) => i > -1) : (index as number) > -1; - if (this.both) { - newFirst = { rows: calculateFirst((index)[0], numToleratedItems[0]), cols: calculateFirst((index)[1], numToleratedItems[1]) }; - scrollTo(calculateCoord(newFirst.cols, (this._itemSize)[1], contentPos.left), calculateCoord(newFirst.rows, (this._itemSize)[0], contentPos.top)); - } else { - newFirst = calculateFirst(index, numToleratedItems); + if (valid) { + const first = this.first; + const { scrollTop = 0, scrollLeft = 0 } = this.elementViewChild?.nativeElement; + const { numToleratedItems } = this.calculateNumItems(); + const contentPos = this.getContentPosition(); + const itemSize = this.itemSize; + const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index); + const calculateCoord = (_first, _size, _cpos) => _first * _size + _cpos; + const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior }); + let newFirst = this.both ? { rows: 0, cols: 0 } : 0; + let isRangeChanged = false, + isScrollChanged = false; - if (this.horizontal) { - scrollTo(calculateCoord(newFirst, this._itemSize, contentPos.left), 0); - } - if (this.vertical) { - const currentScrollLeft = this.elementViewChild?.nativeElement.scrollLeft; - scrollTo(currentScrollLeft, calculateCoord(newFirst, this._itemSize, contentPos.top)); + if (this.both) { + newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) }; + scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top)); + isScrollChanged = this.lastScrollPos.top !== scrollTop || this.lastScrollPos.left !== scrollLeft; + isRangeChanged = newFirst.rows !== first.rows || newFirst.cols !== first.cols; + } else { + newFirst = calculateFirst(index as number, numToleratedItems); + this.horizontal ? scrollTo(calculateCoord(newFirst, itemSize, contentPos.left), scrollTop) : scrollTo(scrollLeft, calculateCoord(newFirst, itemSize, contentPos.top)); + isScrollChanged = this.lastScrollPos !== (this.horizontal ? scrollLeft : scrollTop); + isRangeChanged = newFirst !== first; } - } - this.isRangeChanged = this.first !== newFirst; - this.first = newFirst; + this.isRangeChanged = isRangeChanged; + isScrollChanged && (this.first = newFirst); + } } scrollInView(index: number, to: ScrollerToType, behavior: ScrollBehavior = 'auto') { From 9fe855b0d4fb9eed34548f675901da9a07f0d0f3 Mon Sep 17 00:00:00 2001 From: Cr3aHal0 Date: Tue, 6 Feb 2024 22:54:53 +0100 Subject: [PATCH 38/38] fix(14715): post review change allowing filterable zero-ish option value to have its label displayed + strict type check --- src/app/components/dropdown/dropdown.ts | 8 ++++---- src/app/showcase/doc/dropdown/filterdoc.ts | 20 +++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 9febc164c40..e9720fe834a 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -861,7 +861,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV get filled(): boolean { if (typeof this.modelValue() === 'string') return !!this.modelValue(); - return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined; + return this.modelValue() || this.modelValue() !== null || this.modelValue() !== undefined; } get isVisibleClearIcon(): boolean | undefined { @@ -946,7 +946,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) { const selectedOptionIndex = this.findSelectedOptionIndex(); - if (selectedOptionIndex !== -1 || !modelValue || this.editable) { + if (selectedOptionIndex !== -1 || modelValue === undefined || modelValue === null || this.editable) { this.selectedOption = visibleOptions[selectedOptionIndex]; this.cd.markForCheck(); } @@ -1067,7 +1067,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.focusedOptionIndex.set(this.findFirstFocusedOptionIndex()); this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false); } - if (this.autoDisplayFirst && !this.modelValue()) { + if (this.autoDisplayFirst && (this.modelValue() === null || this.modelValue() === undefined)) { const ind = this.findFirstOptionIndex(); this.onOptionSelect(null, this.visibleOptions()[ind], false, true); } @@ -1107,7 +1107,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV } allowModelChange() { - return this.autoDisplayFirst && !this.placeholder && !this.modelValue() && !this.editable && this.options && this.options.length; + return this.autoDisplayFirst && !this.placeholder && (this.modelValue() === undefined || this.modelValue() === null) && !this.editable && this.options && this.options.length; } isSelected(option) { diff --git a/src/app/showcase/doc/dropdown/filterdoc.ts b/src/app/showcase/doc/dropdown/filterdoc.ts index d18b3b6cc9e..d868e806545 100644 --- a/src/app/showcase/doc/dropdown/filterdoc.ts +++ b/src/app/showcase/doc/dropdown/filterdoc.ts @@ -9,15 +9,13 @@ import { Code } from '../../domain/code';
- -
- -
{{ selectedCountry.name }}
+ +
+
{{ selectedOption.name }}
-
{{ country.name }}
 @@ -48,10 +46,10 @@ export class FilterDoc implements OnInit { code: Code = { basic: ` - -
+ +
-
{{ selectedCountry.name }}
+
{{ selectedOption.name }}
 @@ -65,10 +63,10 @@ export class FilterDoc implements OnInit { html: `
- -
+ +
-
{{ selectedCountry.name }}
+
{{ selectedOption.name }}