From dc8327f8eccfc51987d5ff3c6c150952591acf25 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 1 Nov 2022 17:29:09 +0300 Subject: [PATCH] Fixed #12117 Sidebar | Add footer template --- src/app/components/sidebar/sidebar.ts | 8 + .../components/sidebar/sidebardemo.html | 13 + .../components/themes/arya-blue/theme.css | 11 +- .../components/themes/arya-green/theme.css | 11 +- .../components/themes/arya-orange/theme.css | 11 +- .../components/themes/arya-purple/theme.css | 11 +- .../themes/bootstrap4-dark-blue/theme.css | 11 +- .../themes/bootstrap4-dark-purple/theme.css | 11 +- .../themes/bootstrap4-light-blue/theme.css | 11 +- .../themes/bootstrap4-light-purple/theme.css | 11 +- .../components/themes/fluent-light/theme.css | 11 +- .../themes/lara-dark-blue/theme.css | 11 +- .../themes/lara-dark-indigo/theme.css | 11 +- .../themes/lara-dark-purple/theme.css | 11 +- .../themes/lara-dark-teal/theme.css | 11 +- .../themes/lara-light-blue/theme.css | 25 +- .../themes/lara-light-indigo/theme.css | 25 +- .../themes/lara-light-purple/theme.css | 25 +- .../themes/lara-light-teal/theme.css | 25 +- .../components/themes/luna-amber/theme.css | 39 +-- .../components/themes/luna-blue/theme.css | 39 +-- .../components/themes/luna-green/theme.css | 39 +-- .../components/themes/luna-pink/theme.css | 39 +-- .../themes/md-dark-deeppurple/theme.css | 258 +++++++++--------- .../themes/md-dark-indigo/theme.css | 258 +++++++++--------- .../themes/md-light-deeppurple/theme.css | 22 +- .../themes/md-light-indigo/theme.css | 22 +- .../themes/mdc-dark-deeppurple/theme.css | 258 +++++++++--------- .../themes/mdc-dark-indigo/theme.css | 258 +++++++++--------- .../themes/mdc-light-deeppurple/theme.css | 22 +- .../themes/mdc-light-indigo/theme.css | 22 +- .../components/themes/nova-accent/theme.css | 11 +- .../components/themes/nova-alt/theme.css | 11 +- src/assets/components/themes/nova/theme.css | 11 +- src/assets/components/themes/rhea/theme.css | 11 +- .../components/themes/saga-blue/theme.css | 11 +- .../components/themes/saga-green/theme.css | 11 +- .../components/themes/saga-orange/theme.css | 11 +- .../components/themes/saga-purple/theme.css | 11 +- .../themes/tailwind-light/theme.css | 76 +++--- .../components/themes/vela-blue/theme.css | 11 +- .../components/themes/vela-green/theme.css | 11 +- .../components/themes/vela-orange/theme.css | 11 +- .../components/themes/vela-purple/theme.css | 11 +- 44 files changed, 891 insertions(+), 857 deletions(-) diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index 22d8a995f1b..e97369f1597 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -60,6 +60,9 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{ +
+ +
`, animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], @@ -127,6 +130,8 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { headerTemplate: TemplateRef; + footerTemplate: TemplateRef; + constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {} ngAfterViewInit() { @@ -142,6 +147,9 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { case 'header': this.headerTemplate = item.template; break; + case 'footer': + this.footerTemplate = item.template; + break; default: this.contentTemplate = item.template; break; diff --git a/src/app/showcase/components/sidebar/sidebardemo.html b/src/app/showcase/components/sidebar/sidebardemo.html index d5aec4ba872..24632cd30d1 100755 --- a/src/app/showcase/components/sidebar/sidebardemo.html +++ b/src/app/showcase/components/sidebar/sidebardemo.html @@ -86,6 +86,15 @@
Full Screen
<p-sidebar [(visible)]="display" [fullScreen]="true"> Content </p-sidebar> + + +
Custom Content
+ +<p-sidebar [(visible)]="display"> +  <ng-template pTemplate="header">Header Content</ng-template> +  <ng-template pTemplate="content">Body Content</ng-template> +  <ng-template pTemplate="footer">Footer Content</ng-template> +</p-sidebar>
Properties
@@ -242,6 +251,10 @@
Templates
content - + + footer + - + diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index b98dc2003e4..787859bf540 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #64B5F6; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #64B5F6; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #383838; diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index a2cce19a714..3ad17ad4e3a 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #81C784; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #81C784; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #383838; diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index b8e4b6809aa..fa7286b5928 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #FFD54F; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #FFD54F; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #383838; diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 9eb8971afc0..231e7053c18 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #BA68C8; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #BA68C8; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #383838; diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 11ab6579386..7050fb4dead 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #3f4b5b; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #8dd0ff; color: #151515; border-radius: 4px; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #3f4b5b; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #8dd0ff; color: #151515; border-radius: 4px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #8dd0ff; color: #151515; border-radius: 4px; @@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem 1.25rem; +} .p-tooltip .p-tooltip-text { background: #3f4b5b; diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 9fa191350e2..ee0989562fd 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #3f4b5b; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #c298d8; color: #151515; border-radius: 4px; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #3f4b5b; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #c298d8; color: #151515; border-radius: 4px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #c298d8; color: #151515; border-radius: 4px; @@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem 1.25rem; +} .p-tooltip .p-tooltip-text { background: #3f4b5b; diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 8fc322d7d65..a6dbeaef528 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #ced4da; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #007bff; color: #ffffff; border-radius: 4px; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #ced4da; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #007bff; color: #ffffff; border-radius: 4px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #007bff; color: #ffffff; border-radius: 4px; @@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem 1.25rem; +} .p-tooltip .p-tooltip-text { background: #212529; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 26f161e6285..f440f478286 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #ced4da; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #883cae; color: #ffffff; border-radius: 4px; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #ced4da; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #883cae; color: #ffffff; border-radius: 4px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.75rem; + margin-right: 0.5rem; background: #883cae; color: #ffffff; border-radius: 4px; @@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem 1.25rem; +} .p-tooltip .p-tooltip-text { background: #212529; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index f76157d193b..5df03bbc741 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #323130; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #edebe9; color: #323130; border-radius: 2px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #323130; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #edebe9; color: #323130; border-radius: 2px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #605e5c; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #edebe9; color: #323130; border-radius: 2px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #ffffff; diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 6f2c34e9184..abad961cd00 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #93C5FD; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(147, 197, 253, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #93C5FD; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(147, 197, 253, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(147, 197, 253, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #0b213f; diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 470b2d9e6bc..850b77b8758 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #A5B4FC; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(165, 180, 252, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #A5B4FC; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(165, 180, 252, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(165, 180, 252, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #0b213f; diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 219aedc9bdb..525c33e8d09 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #C4B5FD; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(196, 181, 253, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #C4B5FD; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(196, 181, 253, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(196, 181, 253, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #0b213f; diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index d6809648593..b7e8f34fc88 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #5EEAD4; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(94, 234, 212, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #5EEAD4; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(94, 234, 212, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(94, 234, 212, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #0b213f; diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index b8d165073d9..18c62f912af 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #3B82F6; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EFF6FF; color: #1D4ED8; border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #3B82F6; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EFF6FF; color: #1D4ED8; border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EFF6FF; color: #1D4ED8; border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #495057; @@ -6206,25 +6207,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 73ba823669f..71d4ec3dce5 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #6366F1; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EEF2FF; color: #4338CA; border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #6366F1; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EEF2FF; color: #4338CA; border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EEF2FF; color: #4338CA; border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #495057; @@ -6206,25 +6207,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index e016c8d804c..7fba2cf89a1 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #8B5CF6; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #F5F3FF; color: #6D28D9; border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #8B5CF6; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #F5F3FF; color: #6D28D9; border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #F5F3FF; color: #6D28D9; border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #495057; @@ -6206,25 +6207,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 4b34f7a8e68..2cc4628835b 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #14B8A6; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #F0FDFA; color: #0F766E; border-radius: 6px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #14B8A6; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #F0FDFA; color: #0F766E; border-radius: 6px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #F0FDFA; color: #0F766E; border-radius: 6px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.p-sidebar .p-sidebar-footer { + padding: 1.25rem; +} .p-tooltip .p-tooltip-text { background: #495057; @@ -6206,25 +6207,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index ad1b1d33276..f71f52f524a 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #FFE082; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #FFE082; color: #212529; border-radius: 3px; @@ -364,7 +364,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -452,7 +452,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #FFE082; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #FFE082; color: #212529; border-radius: 3px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #FFE082; color: #212529; border-radius: 3px; @@ -1389,7 +1387,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { margin-left: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -1820,7 +1818,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2650,7 +2648,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2789,7 +2787,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2963,7 +2961,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2991,7 +2989,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3223,7 +3221,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3689,7 +3687,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3886,7 +3884,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4171,7 +4169,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4382,7 +4380,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4486,7 +4484,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4510,6 +4508,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #4c4c4c; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 5d2ed3cfcb3..75e679de8f2 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #81D4FA; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #81D4FA; color: #212529; border-radius: 3px; @@ -364,7 +364,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -452,7 +452,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #81D4FA; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #81D4FA; color: #212529; border-radius: 3px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #81D4FA; color: #212529; border-radius: 3px; @@ -1389,7 +1387,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { margin-left: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -1820,7 +1818,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2650,7 +2648,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2789,7 +2787,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2963,7 +2961,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2991,7 +2989,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3223,7 +3221,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3689,7 +3687,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3886,7 +3884,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4171,7 +4169,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4382,7 +4380,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4486,7 +4484,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4510,6 +4508,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #4c4c4c; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 7a108a975a8..ca8ba01054c 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #C5E1A5; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #C5E1A5; color: #212529; border-radius: 3px; @@ -364,7 +364,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -452,7 +452,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #C5E1A5; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #C5E1A5; color: #212529; border-radius: 3px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #C5E1A5; color: #212529; border-radius: 3px; @@ -1389,7 +1387,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { margin-left: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -1820,7 +1818,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2650,7 +2648,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2789,7 +2787,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2963,7 +2961,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2991,7 +2989,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3223,7 +3221,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3689,7 +3687,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3886,7 +3884,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4171,7 +4169,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4382,7 +4380,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4486,7 +4484,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4510,6 +4508,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #4c4c4c; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index f7e2e4f60f8..b14f8760b36 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #F48FB1; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #F48FB1; color: #212529; border-radius: 3px; @@ -364,7 +364,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -452,7 +452,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #F48FB1; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #F48FB1; color: #212529; border-radius: 3px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #F48FB1; color: #212529; border-radius: 3px; @@ -1389,7 +1387,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { margin-left: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -1820,7 +1818,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2650,7 +2648,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2789,7 +2787,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2963,7 +2961,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -2991,7 +2989,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3223,7 +3221,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { font-size: 1rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3689,7 +3687,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { margin-right: 0.5rem; width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -3886,7 +3884,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4171,7 +4169,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4382,7 +4380,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4486,7 +4484,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: #8888; + color: rgba(136, 136, 136, 0.5333333333); border: 0 none; background: transparent; border-radius: 50%; @@ -4510,6 +4508,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #4c4c4c; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index f39cd482311..4aa98f2a74a 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-radius: 4px; @@ -323,7 +320,7 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; @@ -363,7 +360,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -380,7 +377,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -464,13 +461,13 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -529,7 +526,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid rgba(255, 255, 255, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -587,7 +584,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -652,7 +649,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -663,13 +660,13 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { } .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -685,7 +682,7 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -722,13 +719,13 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-radius: 4px; @@ -804,7 +801,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { .p-dropdown { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -852,7 +849,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -885,7 +882,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { padding: 1rem 1rem; @@ -905,13 +902,13 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -965,7 +962,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -1019,14 +1016,14 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - 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); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid rgba(255, 255, 255, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, @@ -1126,7 +1123,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1148,7 +1145,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1170,7 +1167,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1245,13 +1242,13 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-input-filled .p-inputtext { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { @@ -1267,12 +1264,12 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1326,7 +1323,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } p-listbox.ng-dirty.ng-invalid > .p-listbox { @@ -1335,7 +1332,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-radius: 4px; @@ -1388,7 +1383,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1443,7 +1438,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1471,13 +1466,13 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect { } .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-multiselect.p-multiselect-clearable .p-multiselect-label-container { @@ -1535,7 +1530,7 @@ p-password.p-password-clearable.p-password-mask .p-password-clear-icon { height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1573,10 +1568,10 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1659,7 +1654,7 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { } .p-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1754,7 +1749,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1777,7 +1772,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1806,7 +1801,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1858,13 +1853,13 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-input-filled .p-treeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-treeselect.p-treeselect-clearable .p-treeselect-label-container { @@ -3046,7 +3041,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { outline: 0 none; @@ -3054,13 +3049,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3069,7 +3064,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3274,7 +3269,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-color: rgba(206, 147, 216, 0.16); } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { @@ -3437,14 +3432,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-orderlist-item.cdk-drag-preview { @@ -3457,7 +3452,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3638,14 +3633,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-picklist-item.cdk-drag-preview { @@ -3745,11 +3740,11 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3802,7 +3797,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -4136,7 +4131,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4146,7 +4141,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4269,13 +4264,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter-resizing { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tabview .p-tabview-nav { @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #444444; @@ -4711,7 +4709,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4903,7 +4901,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-megamenu .p-megamenu-submenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu .p-megamenu-submenu .p-menuitem { @@ -5002,7 +5000,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem { @@ -5125,7 +5123,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5191,7 +5189,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5478,7 +5476,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5538,7 +5536,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5674,7 +5672,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6053,7 +6051,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-avatar { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6120,7 +6118,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-chip { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6296,8 +6294,8 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6307,13 +6305,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6519,7 +6517,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont } .p-calendar-w-btn { - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6576,7 +6574,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont order: 3; } .p-datepicker table th { - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6605,8 +6603,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6616,13 +6614,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6676,8 +6674,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6687,13 +6685,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6754,15 +6752,15 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6825,8 +6823,8 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6836,13 +6834,13 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6920,8 +6918,8 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6931,13 +6929,13 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6987,20 +6985,20 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7017,8 +7015,8 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7225,8 +7223,8 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7236,13 +7234,13 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7386,10 +7384,10 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7571,8 +7569,8 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7582,13 +7580,13 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index a63ffc0c364..c30e1cb9f27 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-radius: 4px; @@ -323,7 +320,7 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -363,7 +360,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -380,7 +377,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -464,13 +461,13 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -529,7 +526,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid rgba(255, 255, 255, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -587,7 +584,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -652,7 +649,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -663,13 +660,13 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { } .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -685,7 +682,7 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -722,13 +719,13 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-radius: 4px; @@ -804,7 +801,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { .p-dropdown { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -852,7 +849,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -885,7 +882,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { padding: 1rem 1rem; @@ -905,13 +902,13 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -965,7 +962,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -1019,14 +1016,14 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - 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); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid rgba(255, 255, 255, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, @@ -1126,7 +1123,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1148,7 +1145,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1170,7 +1167,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1245,13 +1242,13 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-input-filled .p-inputtext { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { @@ -1267,12 +1264,12 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1326,7 +1323,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } p-listbox.ng-dirty.ng-invalid > .p-listbox { @@ -1335,7 +1332,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-radius: 4px; @@ -1388,7 +1383,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1443,7 +1438,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1471,13 +1466,13 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect { } .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-multiselect.p-multiselect-clearable .p-multiselect-label-container { @@ -1535,7 +1530,7 @@ p-password.p-password-clearable.p-password-mask .p-password-clear-icon { height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1573,10 +1568,10 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1659,7 +1654,7 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { } .p-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1754,7 +1749,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1777,7 +1772,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1806,7 +1801,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1858,13 +1853,13 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-input-filled .p-treeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-treeselect.p-treeselect-clearable .p-treeselect-label-container { @@ -3046,7 +3041,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { outline: 0 none; @@ -3054,13 +3049,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3069,7 +3064,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3274,7 +3269,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-color: rgba(159, 168, 218, 0.16); } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { @@ -3437,14 +3432,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-orderlist-item.cdk-drag-preview { @@ -3457,7 +3452,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3638,14 +3633,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-picklist-item.cdk-drag-preview { @@ -3745,11 +3740,11 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3802,7 +3797,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -4136,7 +4131,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4146,7 +4141,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4269,13 +4264,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter-resizing { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tabview .p-tabview-nav { @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #444444; @@ -4711,7 +4709,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4903,7 +4901,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-megamenu .p-megamenu-submenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu .p-megamenu-submenu .p-menuitem { @@ -5002,7 +5000,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem { @@ -5125,7 +5123,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5191,7 +5189,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5478,7 +5476,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5538,7 +5536,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5674,7 +5672,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6053,7 +6051,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-avatar { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6120,7 +6118,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-chip { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6296,8 +6294,8 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6307,13 +6305,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6519,7 +6517,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont } .p-calendar-w-btn { - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6576,7 +6574,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont order: 3; } .p-datepicker table th { - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6605,8 +6603,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6616,13 +6614,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6676,8 +6674,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6687,13 +6685,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6754,15 +6752,15 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6825,8 +6823,8 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6836,13 +6834,13 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6920,8 +6918,8 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6931,13 +6929,13 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6987,20 +6985,20 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7017,8 +7015,8 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7225,8 +7223,8 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7236,13 +7234,13 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7386,10 +7384,10 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7571,8 +7569,8 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7582,13 +7580,13 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 11279dc93cd..ee8891b7d42 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(103, 58, 183, 0.12); color: #673AB7; border-radius: 4px; @@ -456,7 +453,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: black; + border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #673AB7; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(103, 58, 183, 0.12); color: #673AB7; border-radius: 4px; @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(103, 58, 183, 0.12); color: #673AB7; border-radius: 4px; @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 8b40aeb677d..a01d3fa993e 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(63, 81, 181, 0.12); color: #3F51B5; border-radius: 4px; @@ -456,7 +453,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: black; + border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #3F51B5; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.5rem 1rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(63, 81, 181, 0.12); color: #3F51B5; border-radius: 4px; @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; + margin-right: 0.5rem; background: rgba(63, 81, 181, 0.12); color: #3F51B5; border-radius: 4px; @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 3f2d2cfb706..cf2a3f60c83 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-radius: 4px; @@ -323,7 +320,7 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; @@ -363,7 +360,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -380,7 +377,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -464,13 +461,13 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -529,7 +526,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid rgba(255, 255, 255, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -587,7 +584,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -652,7 +649,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -663,13 +660,13 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { } .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -685,7 +682,7 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -722,13 +719,13 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-radius: 4px; @@ -804,7 +801,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { .p-dropdown { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -852,7 +849,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -885,7 +882,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { padding: 0.75rem 0.75rem; @@ -905,13 +902,13 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -965,7 +962,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -1019,14 +1016,14 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - 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); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.75rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid rgba(255, 255, 255, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, @@ -1126,7 +1123,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1148,7 +1145,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1170,7 +1167,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1245,13 +1242,13 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-input-filled .p-inputtext { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { @@ -1267,12 +1264,12 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1326,7 +1323,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } p-listbox.ng-dirty.ng-invalid > .p-listbox { @@ -1335,7 +1332,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-radius: 4px; @@ -1388,7 +1383,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1443,7 +1438,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1471,13 +1466,13 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect { } .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-multiselect.p-multiselect-clearable .p-multiselect-label-container { @@ -1535,7 +1530,7 @@ p-password.p-password-clearable.p-password-mask .p-password-clear-icon { height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1573,10 +1568,10 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1659,7 +1654,7 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { } .p-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1754,7 +1749,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1777,7 +1772,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1806,7 +1801,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1858,13 +1853,13 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-input-filled .p-treeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-treeselect.p-treeselect-clearable .p-treeselect-label-container { @@ -3046,7 +3041,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { outline: 0 none; @@ -3054,13 +3049,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3069,7 +3064,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3274,7 +3269,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-color: rgba(206, 147, 216, 0.16); } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { @@ -3437,14 +3432,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-orderlist-item.cdk-drag-preview { @@ -3457,7 +3452,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3638,14 +3633,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-picklist-item.cdk-drag-preview { @@ -3745,11 +3740,11 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3802,7 +3797,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -4136,7 +4131,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4146,7 +4141,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4269,13 +4264,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter-resizing { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tabview .p-tabview-nav { @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.75rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.75rem; +} .p-tooltip .p-tooltip-text { background: #444444; @@ -4711,7 +4709,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4903,7 +4901,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-megamenu .p-megamenu-submenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu .p-megamenu-submenu .p-menuitem { @@ -5002,7 +5000,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem { @@ -5125,7 +5123,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5191,7 +5189,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5478,7 +5476,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5538,7 +5536,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5674,7 +5672,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6053,7 +6051,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-avatar { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6120,7 +6118,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-chip { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6296,8 +6294,8 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6307,13 +6305,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6519,7 +6517,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont } .p-calendar-w-btn { - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6576,7 +6574,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont order: 3; } .p-datepicker table th { - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6605,8 +6603,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6616,13 +6614,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6676,8 +6674,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6687,13 +6685,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6754,15 +6752,15 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6825,8 +6823,8 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6836,13 +6834,13 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6920,8 +6918,8 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6931,13 +6929,13 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6987,20 +6985,20 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7017,8 +7015,8 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7225,8 +7223,8 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7236,13 +7234,13 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7386,10 +7384,10 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7571,8 +7569,8 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7582,13 +7580,13 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index aa8919748c2..8c2ed5efe75 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-radius: 4px; @@ -323,7 +320,7 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -363,7 +360,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -380,7 +377,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -464,13 +461,13 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -529,7 +526,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid rgba(255, 255, 255, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -587,7 +584,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -652,7 +649,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -663,13 +660,13 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { } .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -685,7 +682,7 @@ p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon { height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -722,13 +719,13 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-radius: 4px; @@ -804,7 +801,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { .p-dropdown { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -852,7 +849,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -885,7 +882,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { padding: 0.75rem 0.75rem; @@ -905,13 +902,13 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -965,7 +962,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { } .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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -1019,14 +1016,14 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - 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); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.75rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid rgba(255, 255, 255, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, @@ -1126,7 +1123,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1148,7 +1145,7 @@ p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-input box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1170,7 +1167,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1245,13 +1242,13 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-input-filled .p-inputtext { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { @@ -1267,12 +1264,12 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1326,7 +1323,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } p-listbox.ng-dirty.ng-invalid > .p-listbox { @@ -1335,7 +1332,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-radius: 4px; @@ -1388,7 +1383,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1443,7 +1438,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1471,13 +1466,13 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect { } .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-multiselect.p-multiselect-clearable .p-multiselect-label-container { @@ -1535,7 +1530,7 @@ p-password.p-password-clearable.p-password-mask .p-password-clear-icon { height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1573,10 +1568,10 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: rgba(255, 255, 255, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1659,7 +1654,7 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { } .p-slider { - background: rgba(255, 255, 255, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1754,7 +1749,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect { background: #1e1e1e; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1777,7 +1772,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1806,7 +1801,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1858,13 +1853,13 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-input-filled .p-treeselect { - background: rgba(255, 255, 255, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } p-treeselect.p-treeselect-clearable .p-treeselect-label-container { @@ -3046,7 +3041,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { outline: 0 none; @@ -3054,13 +3049,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3069,7 +3064,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3274,7 +3269,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-color: rgba(159, 168, 218, 0.16); } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { @@ -3437,14 +3432,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-orderlist-item.cdk-drag-preview { @@ -3457,7 +3452,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3638,14 +3633,14 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 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: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-picklist-item.cdk-drag-preview { @@ -3745,11 +3740,11 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3802,7 +3797,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -4136,7 +4131,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4146,7 +4141,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4269,13 +4264,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: rgba(255, 255, 255, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter-resizing { - background: rgba(255, 255, 255, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tabview .p-tabview-nav { @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.75rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.75rem; +} .p-tooltip .p-tooltip-text { background: #444444; @@ -4711,7 +4709,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4903,7 +4901,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-megamenu .p-megamenu-submenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu .p-megamenu-submenu .p-menuitem { @@ -5002,7 +5000,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem { @@ -5125,7 +5123,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5191,7 +5189,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5478,7 +5476,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5538,7 +5536,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5674,7 +5672,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menu-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6053,7 +6051,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-avatar { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6120,7 +6118,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { } .p-chip { - background-color: rgba(255, 255, 255, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6296,8 +6294,8 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6307,13 +6305,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6519,7 +6517,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont } .p-calendar-w-btn { - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6576,7 +6574,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont order: 3; } .p-datepicker table th { - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6605,8 +6603,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6616,13 +6614,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-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: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6676,8 +6674,8 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6687,13 +6685,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6754,15 +6752,15 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6825,8 +6823,8 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6836,13 +6834,13 @@ p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6920,8 +6918,8 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6931,13 +6929,13 @@ p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6987,20 +6985,20 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7017,8 +7015,8 @@ p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7225,8 +7223,8 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7236,13 +7234,13 @@ p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7386,10 +7384,10 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7571,8 +7569,8 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7582,13 +7580,13 @@ p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: rgba(255, 255, 255, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index 10247e83e21..14c6de60f0d 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(103, 58, 183, 0.12); color: #673AB7; border-radius: 4px; @@ -456,7 +453,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: black; + border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #673AB7; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(103, 58, 183, 0.12); color: #673AB7; border-radius: 4px; @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(103, 58, 183, 0.12); color: #673AB7; border-radius: 4px; @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.75rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.75rem; +} .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index 2c7c39621c7..111b72d72e5 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -50,24 +50,21 @@ 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+ */ } * { box-sizing: border-box; @@ -267,7 +264,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -290,6 +286,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(63, 81, 181, 0.12); color: #3F51B5; border-radius: 4px; @@ -456,7 +453,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: black; + border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #3F51B5; @@ -740,7 +737,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -753,6 +749,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(63, 81, 181, 0.12); color: #3F51B5; border-radius: 4px; @@ -1355,11 +1352,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: rgba(63, 81, 181, 0.12); color: #3F51B5; border-radius: 4px; @@ -4546,6 +4541,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.75rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.75rem; +} .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 86fb581c8fc..e903c34307c 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #212121; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #e02365; color: #ffffff; border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #212121; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #e02365; color: #ffffff; border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #e02365; color: #ffffff; border-radius: 3px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #333333; diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 3afa0f88128..a0ebe449a19 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #212121; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #007ad9; color: #ffffff; border-radius: 3px; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #212121; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #007ad9; color: #ffffff; border-radius: 3px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #007ad9; color: #ffffff; border-radius: 3px; @@ -4510,6 +4508,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #333333; diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index 8e40cab5cff..b4b54303e41 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #212121; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #007ad9; color: #ffffff; border-radius: 3px; @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #212121; @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #007ad9; color: #ffffff; border-radius: 3px; @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #007ad9; color: #ffffff; border-radius: 3px; @@ -4510,6 +4508,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #333333; diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index c637a343855..52ad474521e 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #a6a6a6; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #AFD3C8; color: #385048; border-radius: 2px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.2145rem 0.429rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #a6a6a6; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #AFD3C8; color: #385048; border-radius: 2px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #a6a6a6; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; background: #AFD3C8; color: #385048; border-radius: 2px; @@ -4498,6 +4496,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 0.571rem 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 0.857rem 1rem; +} .p-tooltip .p-tooltip-text { background: #AFD3C8; diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index e1c596be2ce..7395df32670 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #2196F3; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #E3F2FD; color: #495057; border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #2196F3; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #E3F2FD; color: #495057; border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #E3F2FD; color: #495057; border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #495057; diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index 3ddf70860cb..1d48c851aa3 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #4CAF50; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #E8F5E9; color: #495057; border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #4CAF50; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #E8F5E9; color: #495057; border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #E8F5E9; color: #495057; border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #495057; diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index 3d64363ce45..c710dfdbf7d 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #FFC107; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #FFF3E0; color: #495057; border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #FFC107; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #FFF3E0; color: #495057; border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #FFF3E0; color: #495057; border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #495057; diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index a2af92353f2..00154c39bd7 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #9C27B0; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #F3E5F5; color: #495057; border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #9C27B0; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #F3E5F5; color: #495057; border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: #F3E5F5; color: #495057; border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #495057; diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index f3883b6298d..ed6cf6b159a 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -49,36 +49,31 @@ 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+ */ } * { box-sizing: border-box; @@ -278,7 +273,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #d4d4d8; @@ -301,6 +295,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EEF2FF; color: #312E81; border-radius: 0.375rem; @@ -318,7 +313,7 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { color: #3f3f46; border: 0 none; border-radius: 0.375rem; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.25rem 0; @@ -380,7 +375,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { .p-datepicker:not(.p-datepicker-inline) { background: #ffffff; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { background: #ffffff; @@ -636,7 +631,7 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon { color: #3f3f46; border: 0 none; border-radius: 0.375rem; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-cascadeselect-panel .p-cascadeselect-items { padding: 0.25rem 0; @@ -751,7 +746,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #d4d4d8; @@ -764,6 +758,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EEF2FF; color: #312E81; border-radius: 0.375rem; @@ -810,7 +805,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { } .p-colorpicker-overlay-panel { - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-dropdown { @@ -859,7 +854,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { color: #3f3f46; border: 0 none; border-radius: 0.375rem; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 0.75rem; @@ -967,7 +962,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { background: #ffffff; border: 0 none; - 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); + 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); border-radius: 0.375rem; padding: 0.25rem 0; } @@ -1366,11 +1361,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: #71717A; } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; + margin-right: 0.5rem; background: #EEF2FF; color: #312E81; border-radius: 0.375rem; @@ -1395,7 +1388,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { color: #3f3f46; border: 0 none; border-radius: 0.375rem; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 0.75rem; @@ -1508,7 +1501,7 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { background: #ffffff; color: #3f3f46; border: 0 none; - 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); + 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); border-radius: 0.375rem; } .p-password-panel .p-password-meter { @@ -1813,7 +1806,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { color: #3f3f46; border: 0 none; border-radius: 0.375rem; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-treeselect-panel .p-treeselect-header { padding: 0.5rem 0.75rem; @@ -3036,7 +3029,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { color: #3f3f46; border: 0 none; border-radius: 0.375rem; - 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); + 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); min-width: 12.5rem; } .p-column-filter-overlay .p-column-filter-row-items { @@ -3460,7 +3453,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1rem; - 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); + 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); border: 0 none; color: #3f3f46; background: #ffffff; @@ -3661,7 +3654,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1rem; - 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); + 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); border: 0 none; color: #3f3f46; background: #ffffff; @@ -4557,12 +4550,15 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1.25rem; } +.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 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + 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); border-radius: 0.375rem; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -4661,7 +4657,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: #ffffff; color: #3f3f46; border: 0 none; - 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); + 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); border-radius: 0.375rem; width: 12.5rem; } @@ -4703,7 +4699,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0.25rem 0; background: #ffffff; border: 0 none; - 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); + 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); border-radius: 0.375rem; } .p-contextmenu .p-menuitem { @@ -4898,7 +4894,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { background: #ffffff; color: #3f3f46; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -5001,7 +4997,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-menu.p-menu-overlay { background: #ffffff; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-menu .p-submenu-header { margin: 0; @@ -5132,7 +5128,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0.25rem 0; background: #ffffff; border: 0 none; - 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); + 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); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -5198,7 +5194,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { padding: 0.25rem 0; background: #ffffff; border: 0 none; - 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); + 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); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -5471,13 +5467,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-slidemenu.p-slidemenu-overlay { background: #ffffff; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-slidemenu .p-slidemenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { background: #f4f4f5; @@ -5661,13 +5657,13 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - 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); + box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-tieredmenu .p-menuitem { margin: 0; @@ -6198,7 +6194,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { width: 3rem; height: 3rem; border-radius: 50%; - 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); + 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); transition: none; } .p-scrolltop.p-link { @@ -6262,7 +6258,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { /* Customizations to the designer theme should be defined here */ .p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); + 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); } .p-inputgroup .p-inputtext, .p-inputgroup .p-togglebutton, .p-inputgroup .p-selectbutton { diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index ebe0e0f654b..466fa65fcf0 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #64B5F6; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #64B5F6; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #304562; diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 33ede7ccec3..93c67079f02 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #81C784; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #81C784; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #304562; diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 85f75ff5912..4b85941002f 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #FFD54F; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #FFD54F; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #304562; diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 4d3951de3d0..13d5bc72f02 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -243,7 +243,6 @@ } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { border-color: #BA68C8; @@ -266,6 +265,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { .p-chips .p-chips-multiple-container { padding: 0.25rem 0.5rem; - gap: 0.5rem; } .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: #BA68C8; @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox { .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } -.p-multiselect.p-multiselect-chip .p-multiselect-label { - gap: 0.5rem; -} .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.5rem; + margin-right: 0.5rem; background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 3px; @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { .p-sidebar .p-sidebar-content { padding: 1rem; } +.p-sidebar .p-sidebar-footer { + padding: 1rem; +} .p-tooltip .p-tooltip-text { background: #304562;