diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 846c76c4a48..0bd454b220c 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -1,11 +1,9 @@ -import { DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NavigationEnd, Router, RouterOutlet } from '@angular/router'; import { PrimeNGConfig } from 'primeng/api'; -import { Subscription } from 'rxjs'; -import { Theme } from '../domain/theme'; import { LandingComponent } from '../pages/landing/landing.component'; import { AppConfigService } from '../service/appconfigservice'; import { CarService } from '../service/carservice'; @@ -21,7 +19,6 @@ import { AppConfigComponent } from './config/app.config.component'; import { AppMenuComponent } from './menu/app.menu.component'; import { AppNewsComponent } from './news/app.news.component'; import { AppTopBarComponent } from './topbar/app.topbar.component'; -import { AppConfig } from '../domain/appconfig'; @Component({ selector: 'app-root', @@ -72,7 +69,7 @@ export class AppComponent implements OnInit { } const { theme, darkMode } = this.configService.config(); - const landingTheme = darkMode ? 'lara-dark-blue' : 'lara-light-blue'; + const landingTheme = darkMode ? 'aura-dark-blue' : 'aura-light-blue'; if (event.urlAfterRedirects === '/' && theme !== landingTheme) { this.configService.config.update((config) => ({ ...config, theme: landingTheme, dark: darkMode })); } diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 778f8f76024..7c31aaab34f 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #64B5F6; diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 6a0f369d1ae..eb53bb4b33f 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #81C784; diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index b4f75959227..1e54d6684d1 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFD54F; diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 64fc83ee245..c11e96ff974 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #BA68C8; diff --git a/src/assets/components/themes/aura-dark-amber/theme.css b/src/assets/components/themes/aura-dark-amber/theme.css index 614e5fbddcf..bfe9ddb4ece 100644 --- a/src/assets/components/themes/aura-dark-amber/theme.css +++ b/src/assets/components/themes/aura-dark-amber/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #fbbf24; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #fbbf24; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-blue/theme.css b/src/assets/components/themes/aura-dark-blue/theme.css index 574144d0fc4..2d939037041 100644 --- a/src/assets/components/themes/aura-dark-blue/theme.css +++ b/src/assets/components/themes/aura-dark-blue/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #60a5fa; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #60a5fa; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-cyan/theme.css b/src/assets/components/themes/aura-dark-cyan/theme.css index 858691f8afc..c247c804be6 100644 --- a/src/assets/components/themes/aura-dark-cyan/theme.css +++ b/src/assets/components/themes/aura-dark-cyan/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #22d3ee; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #22d3ee; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-green/theme.css b/src/assets/components/themes/aura-dark-green/theme.css index f24273d7d77..6a35c3f6cdc 100644 --- a/src/assets/components/themes/aura-dark-green/theme.css +++ b/src/assets/components/themes/aura-dark-green/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #34d399; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #34d399; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-indigo/theme.css b/src/assets/components/themes/aura-dark-indigo/theme.css index 73b7f4799fb..70a3fb87e59 100644 --- a/src/assets/components/themes/aura-dark-indigo/theme.css +++ b/src/assets/components/themes/aura-dark-indigo/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #818cf8; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #818cf8; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-lime/theme.css b/src/assets/components/themes/aura-dark-lime/theme.css index 43be6023a38..fa1d596b13e 100644 --- a/src/assets/components/themes/aura-dark-lime/theme.css +++ b/src/assets/components/themes/aura-dark-lime/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #a3e635; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #a3e635; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-noir/theme.css b/src/assets/components/themes/aura-dark-noir/theme.css index 35d8b3109aa..e9656678fe5 100644 --- a/src/assets/components/themes/aura-dark-noir/theme.css +++ b/src/assets/components/themes/aura-dark-noir/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #fafafa; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #fafafa; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-pink/theme.css b/src/assets/components/themes/aura-dark-pink/theme.css index 4955f1ea84e..b51987a2a1d 100644 --- a/src/assets/components/themes/aura-dark-pink/theme.css +++ b/src/assets/components/themes/aura-dark-pink/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #f472b6; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #f472b6; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-purple/theme.css b/src/assets/components/themes/aura-dark-purple/theme.css index bb3bb8e61a0..671e25de6e3 100644 --- a/src/assets/components/themes/aura-dark-purple/theme.css +++ b/src/assets/components/themes/aura-dark-purple/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #a78bfa; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #a78bfa; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-dark-teal/theme.css b/src/assets/components/themes/aura-dark-teal/theme.css index 83d7512cade..284c7869b04 100644 --- a/src/assets/components/themes/aura-dark-teal/theme.css +++ b/src/assets/components/themes/aura-dark-teal/theme.css @@ -839,6 +839,7 @@ color: #ffffff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #ffffff; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #52525b; @@ -6552,21 +6554,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #2dd4bf; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #3f3f46; border: 1px solid #3f3f46; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #a1a1aa; } @@ -7286,21 +7284,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #2dd4bf; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #3f3f46; background-color: #3f3f46; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #a1a1aa; } diff --git a/src/assets/components/themes/aura-light-amber/theme.css b/src/assets/components/themes/aura-light-amber/theme.css index 7dd8b6c6221..686815df2b4 100644 --- a/src/assets/components/themes/aura-light-amber/theme.css +++ b/src/assets/components/themes/aura-light-amber/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #f59e0b; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #f59e0b; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-blue/theme.css b/src/assets/components/themes/aura-light-blue/theme.css index 13122e338cb..e4891eb756b 100644 --- a/src/assets/components/themes/aura-light-blue/theme.css +++ b/src/assets/components/themes/aura-light-blue/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #3B82F6; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #3B82F6; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-cyan/theme.css b/src/assets/components/themes/aura-light-cyan/theme.css index 5dff7403a3c..c7e291486fe 100644 --- a/src/assets/components/themes/aura-light-cyan/theme.css +++ b/src/assets/components/themes/aura-light-cyan/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #06b6d4; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #06b6d4; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-green/theme.css b/src/assets/components/themes/aura-light-green/theme.css index 2f866ecddf7..662d1828a3a 100644 --- a/src/assets/components/themes/aura-light-green/theme.css +++ b/src/assets/components/themes/aura-light-green/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #10b981; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #10b981; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-indigo/theme.css b/src/assets/components/themes/aura-light-indigo/theme.css index ea0f7183e54..fa66a085e10 100644 --- a/src/assets/components/themes/aura-light-indigo/theme.css +++ b/src/assets/components/themes/aura-light-indigo/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #6366F1; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #6366F1; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-lime/theme.css b/src/assets/components/themes/aura-light-lime/theme.css index 8ed656256da..00728753fe3 100644 --- a/src/assets/components/themes/aura-light-lime/theme.css +++ b/src/assets/components/themes/aura-light-lime/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #84cc16; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #84cc16; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-noir/theme.css b/src/assets/components/themes/aura-light-noir/theme.css index 57baf1f8384..3b945efbb38 100644 --- a/src/assets/components/themes/aura-light-noir/theme.css +++ b/src/assets/components/themes/aura-light-noir/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6561,21 +6563,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #020617; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7292,21 +7290,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #020617; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-pink/theme.css b/src/assets/components/themes/aura-light-pink/theme.css index 19fe5b41edb..eab05d1d197 100644 --- a/src/assets/components/themes/aura-light-pink/theme.css +++ b/src/assets/components/themes/aura-light-pink/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #ec4899; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #ec4899; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-purple/theme.css b/src/assets/components/themes/aura-light-purple/theme.css index 5f19fcd7b7a..c847870fe37 100644 --- a/src/assets/components/themes/aura-light-purple/theme.css +++ b/src/assets/components/themes/aura-light-purple/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #8B5CF6; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #8B5CF6; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/aura-light-teal/theme.css b/src/assets/components/themes/aura-light-teal/theme.css index c87fe60e2e5..32f9d2e1e18 100644 --- a/src/assets/components/themes/aura-light-teal/theme.css +++ b/src/assets/components/themes/aura-light-teal/theme.css @@ -841,6 +841,7 @@ color: #334155; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1677,6 +1678,7 @@ color: #334155; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #94a3b8; @@ -6553,21 +6555,17 @@ .p-checkbox .p-checkbox-box.p-focus { outline-offset: 2px; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-focus.p-highlight { border-color: #14b8a6; } - .p-checkbox.p-disabled { + .p-checkbox.p-checkbox-disabled { opacity: 1; } - .p-checkbox.p-disabled .p-checkbox-box { + .p-checkbox.p-checkbox-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } - .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } @@ -7284,21 +7282,17 @@ .p-radiobutton .p-radiobutton-box.p-focus { outline-offset: 2px; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline-width: 1px; - outline-offset: 2px; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-focus.p-highlight { border-color: #14b8a6; } - .p-radiobutton.p-disabled { + .p-radiobutton.p-radiobutton-disabled { opacity: 1; } - .p-radiobutton.p-disabled .p-radiobutton-box { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } - .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 8496ce45675..eca423b4157 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -1662,6 +1663,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #3f4b5b; diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index b037616bce0..2f6c5cbecf1 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -1662,6 +1663,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #3f4b5b; diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index a887e258de7..9e4542f7aa9 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -822,6 +822,7 @@ color: #212529; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -1662,6 +1663,7 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #ced4da; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index fb73958802a..6c5c73daa13 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -822,6 +822,7 @@ color: #212529; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -1662,6 +1663,7 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #ced4da; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 8571debfb4f..5b2fb718ee9 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -822,6 +822,7 @@ color: #323130; border-radius: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #323130; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #323130; diff --git a/src/assets/components/themes/lara-dark-amber/theme.css b/src/assets/components/themes/lara-dark-amber/theme.css index 1a9a2436445..68a28b57ba9 100644 --- a/src/assets/components/themes/lara-dark-amber/theme.css +++ b/src/assets/components/themes/lara-dark-amber/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#1f2937; - --surface-b:#111827; - --surface-c:rgba(255, 255, 255, 0.03); - --surface-d:#424b57; - --surface-e:#1f2937; - --surface-f:#1f2937; - --text-color:rgba(255, 255, 255, 0.87); - --text-color-secondary:rgba(255, 255, 255, 0.6); - --primary-color:#fbbf24; - --primary-color-text:#030712; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #1f2937; + --surface-b: #111827; + --surface-c: rgba(255, 255, 255, 0.03); + --surface-d: #424b57; + --surface-e: #1f2937; + --surface-f: #1f2937; + --text-color: rgba(255, 255, 255, 0.87); + --text-color-secondary: rgba(255, 255, 255, 0.6); + --primary-color: #fbbf24; + --primary-color-text: #030712; --surface-0: #111827; --surface-50: #1f2937; --surface-100: #374151; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#111827; - --surface-section:#111827; - --surface-card:#1f2937; - --surface-overlay:#1f2937; - --surface-border:rgba(255,255,255,.1); - --surface-hover:rgba(255,255,255,.03); + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #111827; + --surface-section: #111827; + --surface-card: #1f2937; + --surface-overlay: #1f2937; + --surface-border: rgba(255, 255, 255, 0.1); + --surface-hover: rgba(255, 255, 255, 0.03); --focus-ring: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: rgba(251, 191, 36, 0.16); @@ -311,7 +311,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -408,7 +408,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); @@ -452,9 +455,14 @@ background: #374151; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-autocomplete.p-autocomplete-clearable .p-inputtext { @@ -471,7 +479,7 @@ } p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { @@ -742,7 +750,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); @@ -796,7 +807,7 @@ } p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -828,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -858,7 +870,7 @@ } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-checkbox .p-checkbox-box { @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #fca5a5; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #fbbf24; } @@ -909,16 +925,16 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; } p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-chips.p-chips-clearable .p-inputtext { @@ -989,7 +1005,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,8 +1168,18 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputmask.p-inputmask-clearable .p-inputtext { @@ -1156,7 +1191,7 @@ } p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,8 +1259,8 @@ background: #fcd34d; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { - border-color: #FCA5A5; + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { + border-color: #fca5a5; } .p-inputtext { @@ -1239,7 +1285,7 @@ border-color: #fbbf24; } .p-inputtext.ng-dirty.ng-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; @@ -1257,7 +1303,7 @@ } .p-float-label > .ng-invalid.ng-dirty + label { - color: #FCA5A5; + color: #fca5a5; } .p-input-icon-left > .p-icon-wrapper.p-icon, @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1396,7 +1461,7 @@ } p-listbox.ng-dirty.ng-invalid > .p-listbox { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-multiselect { @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); @@ -1551,11 +1619,11 @@ } p-multiselect.ng-dirty.ng-invalid > .p-multiselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1608,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #fbbf24; @@ -1635,7 +1704,7 @@ } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-radiobutton .p-radiobutton-box { @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1668,13 +1744,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); - border-color: #fbbf24; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #fbbf24; @@ -1683,7 +1758,7 @@ color: #fbbf24; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1725,7 +1800,7 @@ } p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-slider { @@ -1819,7 +1894,7 @@ } p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-treeselect { @@ -1860,7 +1935,7 @@ } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #fcd34d; color: #030712; border-color: #fcd34d; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #fde68a; color: #030712; border-color: #fde68a; @@ -1969,12 +2045,12 @@ color: #fbbf24; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 191, 36, 0.04); color: #fbbf24; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 191, 36, 0.16); color: #fbbf24; border: 1px solid; @@ -1983,11 +2059,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } @@ -1996,12 +2072,12 @@ color: #fbbf24; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 191, 36, 0.04); color: #fbbf24; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(251, 191, 36, 0.16); color: #fbbf24; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); @@ -2090,326 +2166,375 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-link { color: #fbbf24; background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #fbbf24; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2); border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #fbbf24; border-color: transparent; @@ -2483,266 +2608,27 @@ } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, .p-speeddial-semi-circle .p-speeddial-item:first-child, -.p-speeddial-semi-circle .p-speeddial-item:last-child, -.p-speeddial-quarter-circle .p-speeddial-item:first-child, -.p-speeddial-quarter-circle .p-speeddial-item:last-child { - margin: 0; - } - - .p-speeddial-mask { - background-color: rgba(0, 0, 0, 0.4); - } - - .p-splitbutton { - border-radius: 6px; - } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #fbbf24; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 191, 36, 0.04); - color: #fbbf24; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 191, 36, 0.16); - color: #fbbf24; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - border-color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #fbbf24; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 191, 36, 0.04); - color: #fbbf24; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 191, 36, 0.16); - color: #fbbf24; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-splitbutton.p-button-rounded { - border-radius: 2rem; - } - .p-splitbutton.p-button-rounded > .p-button { - border-radius: 2rem; - } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #94a3b8; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #94a3b8; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - border-color: transparent; - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - border-color: transparent; - color: #94a3b8; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #38bdf8; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #38bdf8; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - border-color: transparent; - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - border-color: transparent; - color: #38bdf8; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #4ade80; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #4ade80; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - border-color: transparent; - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - border-color: transparent; - color: #4ade80; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #fb923c; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #fb923c; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - border-color: transparent; - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - border-color: transparent; - color: #fb923c; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #c084fc; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #c084fc; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - border-color: transparent; - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - border-color: transparent; - color: #c084fc; +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #f87171; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - color: #f87171; + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - color: #f87171; + + .p-splitbutton { + border-radius: 6px; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #f87171; - border-color: transparent; + .p-splitbutton.p-button-rounded { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-raised { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2952,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3160,6 +3042,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); @@ -3213,14 +3098,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3133,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3148,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3421,14 +3317,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3352,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3367,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -4097,6 +4004,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } .p-splitter { @@ -4112,10 +4025,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(251, 191, 36, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #fbbf24; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #fbbf24; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4635,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4649,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4660,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4782,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4796,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4807,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4816,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4866,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } @@ -4812,7 +4906,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4920,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4931,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4907,7 +5004,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +5035,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5049,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5060,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4969,6 +5070,7 @@ border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -5151,7 +5253,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5267,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5278,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5337,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5351,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5362,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5548,7 @@ background: #374151; border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5468,7 +5577,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5591,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5602,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5689,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5799,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -6006,6 +6118,103 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #fbbf24; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #fbbf24; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6114,14 +6323,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 5c3fe59f6db..0ee972df77f 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -839,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #60a5fa; diff --git a/src/assets/components/themes/lara-dark-cyan/theme.css b/src/assets/components/themes/lara-dark-cyan/theme.css index aefeb0a333c..1e046c9566b 100644 --- a/src/assets/components/themes/lara-dark-cyan/theme.css +++ b/src/assets/components/themes/lara-dark-cyan/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#1f2937; - --surface-b:#111827; - --surface-c:rgba(255, 255, 255, 0.03); - --surface-d:#424b57; - --surface-e:#1f2937; - --surface-f:#1f2937; - --text-color:rgba(255, 255, 255, 0.87); - --text-color-secondary:rgba(255, 255, 255, 0.6); - --primary-color:#22d3ee; - --primary-color-text:#030712; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #1f2937; + --surface-b: #111827; + --surface-c: rgba(255, 255, 255, 0.03); + --surface-d: #424b57; + --surface-e: #1f2937; + --surface-f: #1f2937; + --text-color: rgba(255, 255, 255, 0.87); + --text-color-secondary: rgba(255, 255, 255, 0.6); + --primary-color: #22d3ee; + --primary-color-text: #030712; --surface-0: #111827; --surface-50: #1f2937; --surface-100: #374151; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#111827; - --surface-section:#111827; - --surface-card:#1f2937; - --surface-overlay:#1f2937; - --surface-border:rgba(255,255,255,.1); - --surface-hover:rgba(255,255,255,.03); + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #111827; + --surface-section: #111827; + --surface-card: #1f2937; + --surface-overlay: #1f2937; + --surface-border: rgba(255, 255, 255, 0.1); + --surface-hover: rgba(255, 255, 255, 0.03); --focus-ring: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: rgba(34, 211, 238, 0.16); @@ -311,7 +311,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -408,7 +408,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); @@ -452,9 +455,14 @@ background: #374151; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-autocomplete.p-autocomplete-clearable .p-inputtext { @@ -471,7 +479,7 @@ } p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { @@ -742,7 +750,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); @@ -796,7 +807,7 @@ } p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -828,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -858,7 +870,7 @@ } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-checkbox .p-checkbox-box { @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #fca5a5; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #22d3ee; } @@ -909,16 +925,16 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; } p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-chips.p-chips-clearable .p-inputtext { @@ -989,7 +1005,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,8 +1168,18 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputmask.p-inputmask-clearable .p-inputtext { @@ -1156,7 +1191,7 @@ } p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,8 +1259,8 @@ background: #67e8f9; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { - border-color: #FCA5A5; + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { + border-color: #fca5a5; } .p-inputtext { @@ -1239,7 +1285,7 @@ border-color: #22d3ee; } .p-inputtext.ng-dirty.ng-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; @@ -1257,7 +1303,7 @@ } .p-float-label > .ng-invalid.ng-dirty + label { - color: #FCA5A5; + color: #fca5a5; } .p-input-icon-left > .p-icon-wrapper.p-icon, @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1396,7 +1461,7 @@ } p-listbox.ng-dirty.ng-invalid > .p-listbox { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-multiselect { @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); @@ -1551,11 +1619,11 @@ } p-multiselect.ng-dirty.ng-invalid > .p-multiselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1608,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #22d3ee; @@ -1635,7 +1704,7 @@ } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-radiobutton .p-radiobutton-box { @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1668,13 +1744,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); - border-color: #22d3ee; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #22d3ee; @@ -1683,7 +1758,7 @@ color: #22d3ee; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1725,7 +1800,7 @@ } p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-slider { @@ -1819,7 +1894,7 @@ } p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-treeselect { @@ -1860,7 +1935,7 @@ } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #67e8f9; color: #030712; border-color: #67e8f9; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #a5f3fc; color: #030712; border-color: #a5f3fc; @@ -1969,12 +2045,12 @@ color: #22d3ee; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 211, 238, 0.04); color: #22d3ee; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 211, 238, 0.16); color: #22d3ee; border: 1px solid; @@ -1983,11 +2059,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } @@ -1996,12 +2072,12 @@ color: #22d3ee; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 211, 238, 0.04); color: #22d3ee; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(34, 211, 238, 0.16); color: #22d3ee; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); @@ -2090,326 +2166,375 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-link { color: #22d3ee; background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #22d3ee; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2); border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #22d3ee; border-color: transparent; @@ -2483,266 +2608,27 @@ } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, .p-speeddial-semi-circle .p-speeddial-item:first-child, -.p-speeddial-semi-circle .p-speeddial-item:last-child, -.p-speeddial-quarter-circle .p-speeddial-item:first-child, -.p-speeddial-quarter-circle .p-speeddial-item:last-child { - margin: 0; - } - - .p-speeddial-mask { - background-color: rgba(0, 0, 0, 0.4); - } - - .p-splitbutton { - border-radius: 6px; - } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #22d3ee; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 211, 238, 0.04); - color: #22d3ee; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 211, 238, 0.16); - color: #22d3ee; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - border-color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #22d3ee; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 211, 238, 0.04); - color: #22d3ee; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 211, 238, 0.16); - color: #22d3ee; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-splitbutton.p-button-rounded { - border-radius: 2rem; - } - .p-splitbutton.p-button-rounded > .p-button { - border-radius: 2rem; - } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #94a3b8; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #94a3b8; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - border-color: transparent; - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - border-color: transparent; - color: #94a3b8; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #38bdf8; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #38bdf8; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - border-color: transparent; - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - border-color: transparent; - color: #38bdf8; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #4ade80; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #4ade80; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - border-color: transparent; - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - border-color: transparent; - color: #4ade80; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #fb923c; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #fb923c; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - border-color: transparent; - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - border-color: transparent; - color: #fb923c; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #c084fc; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #c084fc; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - border-color: transparent; - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - border-color: transparent; - color: #c084fc; +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #f87171; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - color: #f87171; + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - color: #f87171; + + .p-splitbutton { + border-radius: 6px; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #f87171; - border-color: transparent; + .p-splitbutton.p-button-rounded { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-raised { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2952,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3160,6 +3042,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); @@ -3213,14 +3098,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3133,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3148,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3421,14 +3317,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3352,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3367,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -4097,6 +4004,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } .p-splitter { @@ -4112,10 +4025,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(34, 211, 238, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #22d3ee; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #22d3ee; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4635,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4649,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4660,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4782,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4796,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4807,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4816,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4866,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } @@ -4812,7 +4906,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4920,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4931,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4907,7 +5004,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +5035,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5049,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5060,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4969,6 +5070,7 @@ border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -5151,7 +5253,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5267,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5278,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5337,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5351,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5362,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5548,7 @@ background: #374151; border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5468,7 +5577,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5591,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5602,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5689,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5799,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -6006,6 +6118,103 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #22d3ee; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #22d3ee; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6114,14 +6323,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-dark-green/theme.css b/src/assets/components/themes/lara-dark-green/theme.css index e51d74a5178..fd812fbbfb6 100644 --- a/src/assets/components/themes/lara-dark-green/theme.css +++ b/src/assets/components/themes/lara-dark-green/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#1f2937; - --surface-b:#111827; - --surface-c:rgba(255, 255, 255, 0.03); - --surface-d:#424b57; - --surface-e:#1f2937; - --surface-f:#1f2937; - --text-color:rgba(255, 255, 255, 0.87); - --text-color-secondary:rgba(255, 255, 255, 0.6); - --primary-color:#34d399; - --primary-color-text:#030712; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #1f2937; + --surface-b: #111827; + --surface-c: rgba(255, 255, 255, 0.03); + --surface-d: #424b57; + --surface-e: #1f2937; + --surface-f: #1f2937; + --text-color: rgba(255, 255, 255, 0.87); + --text-color-secondary: rgba(255, 255, 255, 0.6); + --primary-color: #34d399; + --primary-color-text: #030712; --surface-0: #111827; --surface-50: #1f2937; --surface-100: #374151; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#111827; - --surface-section:#111827; - --surface-card:#1f2937; - --surface-overlay:#1f2937; - --surface-border:rgba(255,255,255,.1); - --surface-hover:rgba(255,255,255,.03); + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #111827; + --surface-section: #111827; + --surface-card: #1f2937; + --surface-overlay: #1f2937; + --surface-border: rgba(255, 255, 255, 0.1); + --surface-hover: rgba(255, 255, 255, 0.03); --focus-ring: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: rgba(52, 211, 153, 0.16); @@ -311,7 +311,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -408,7 +408,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); @@ -452,9 +455,14 @@ background: #374151; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-autocomplete.p-autocomplete-clearable .p-inputtext { @@ -471,7 +479,7 @@ } p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { @@ -742,7 +750,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); @@ -796,7 +807,7 @@ } p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -828,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -858,7 +870,7 @@ } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-checkbox .p-checkbox-box { @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #fca5a5; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #34d399; } @@ -909,16 +925,16 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; } p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-chips.p-chips-clearable .p-inputtext { @@ -989,7 +1005,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,8 +1168,18 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputmask.p-inputmask-clearable .p-inputtext { @@ -1156,7 +1191,7 @@ } p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,8 +1259,8 @@ background: #6ee7b7; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { - border-color: #FCA5A5; + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { + border-color: #fca5a5; } .p-inputtext { @@ -1239,7 +1285,7 @@ border-color: #34d399; } .p-inputtext.ng-dirty.ng-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; @@ -1257,7 +1303,7 @@ } .p-float-label > .ng-invalid.ng-dirty + label { - color: #FCA5A5; + color: #fca5a5; } .p-input-icon-left > .p-icon-wrapper.p-icon, @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1396,7 +1461,7 @@ } p-listbox.ng-dirty.ng-invalid > .p-listbox { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-multiselect { @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); @@ -1551,11 +1619,11 @@ } p-multiselect.ng-dirty.ng-invalid > .p-multiselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1608,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #34d399; @@ -1635,7 +1704,7 @@ } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-radiobutton .p-radiobutton-box { @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1668,13 +1744,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - border-color: #34d399; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #34d399; @@ -1683,7 +1758,7 @@ color: #34d399; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1725,7 +1800,7 @@ } p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-slider { @@ -1819,7 +1894,7 @@ } p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-treeselect { @@ -1860,7 +1935,7 @@ } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #6ee7b7; color: #030712; border-color: #6ee7b7; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #a7f3d0; color: #030712; border-color: #a7f3d0; @@ -1969,12 +2045,12 @@ color: #34d399; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 211, 153, 0.04); color: #34d399; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 211, 153, 0.16); color: #34d399; border: 1px solid; @@ -1983,11 +2059,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } @@ -1996,12 +2072,12 @@ color: #34d399; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 211, 153, 0.04); color: #34d399; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(52, 211, 153, 0.16); color: #34d399; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); @@ -2090,326 +2166,375 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-link { color: #34d399; background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #34d399; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2); border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #34d399; border-color: transparent; @@ -2483,266 +2608,27 @@ } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, .p-speeddial-semi-circle .p-speeddial-item:first-child, -.p-speeddial-semi-circle .p-speeddial-item:last-child, -.p-speeddial-quarter-circle .p-speeddial-item:first-child, -.p-speeddial-quarter-circle .p-speeddial-item:last-child { - margin: 0; - } - - .p-speeddial-mask { - background-color: rgba(0, 0, 0, 0.4); - } - - .p-splitbutton { - border-radius: 6px; - } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #34d399; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 211, 153, 0.04); - color: #34d399; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(52, 211, 153, 0.16); - color: #34d399; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - border-color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #34d399; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 211, 153, 0.04); - color: #34d399; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(52, 211, 153, 0.16); - color: #34d399; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-splitbutton.p-button-rounded { - border-radius: 2rem; - } - .p-splitbutton.p-button-rounded > .p-button { - border-radius: 2rem; - } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #94a3b8; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #94a3b8; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - border-color: transparent; - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - border-color: transparent; - color: #94a3b8; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #38bdf8; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #38bdf8; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - border-color: transparent; - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - border-color: transparent; - color: #38bdf8; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #4ade80; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #4ade80; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - border-color: transparent; - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - border-color: transparent; - color: #4ade80; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #fb923c; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #fb923c; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - border-color: transparent; - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - border-color: transparent; - color: #fb923c; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #c084fc; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #c084fc; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - border-color: transparent; - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - border-color: transparent; - color: #c084fc; +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #f87171; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - color: #f87171; + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - color: #f87171; + + .p-splitbutton { + border-radius: 6px; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #f87171; - border-color: transparent; + .p-splitbutton.p-button-rounded { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-raised { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2952,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3160,6 +3042,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); @@ -3213,14 +3098,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3133,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3148,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3421,14 +3317,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3352,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3367,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -4097,6 +4004,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } .p-splitter { @@ -4112,10 +4025,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(52, 211, 153, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #34d399; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #34d399; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4635,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4649,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4660,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4782,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4796,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4807,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4816,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4866,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } @@ -4812,7 +4906,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4920,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4931,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4907,7 +5004,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +5035,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5049,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5060,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4969,6 +5070,7 @@ border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -5151,7 +5253,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5267,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5278,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5337,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5351,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5362,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5548,7 @@ background: #374151; border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5468,7 +5577,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5591,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5602,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5689,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5799,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -6006,6 +6118,103 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #34d399; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #34d399; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6114,14 +6323,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index e2887d2803c..4e082e84a65 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -839,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #818cf8; diff --git a/src/assets/components/themes/lara-dark-pink/theme.css b/src/assets/components/themes/lara-dark-pink/theme.css index 3bb4e01dc36..e00d473b8d9 100644 --- a/src/assets/components/themes/lara-dark-pink/theme.css +++ b/src/assets/components/themes/lara-dark-pink/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#1f2937; - --surface-b:#111827; - --surface-c:rgba(255, 255, 255, 0.03); - --surface-d:#424b57; - --surface-e:#1f2937; - --surface-f:#1f2937; - --text-color:rgba(255, 255, 255, 0.87); - --text-color-secondary:rgba(255, 255, 255, 0.6); - --primary-color:#f472b6; - --primary-color-text:#030712; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #1f2937; + --surface-b: #111827; + --surface-c: rgba(255, 255, 255, 0.03); + --surface-d: #424b57; + --surface-e: #1f2937; + --surface-f: #1f2937; + --text-color: rgba(255, 255, 255, 0.87); + --text-color-secondary: rgba(255, 255, 255, 0.6); + --primary-color: #f472b6; + --primary-color-text: #030712; --surface-0: #111827; --surface-50: #1f2937; --surface-100: #374151; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#111827; - --surface-section:#111827; - --surface-card:#1f2937; - --surface-overlay:#1f2937; - --surface-border:rgba(255,255,255,.1); - --surface-hover:rgba(255,255,255,.03); + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #111827; + --surface-section: #111827; + --surface-card: #1f2937; + --surface-overlay: #1f2937; + --surface-border: rgba(255, 255, 255, 0.1); + --surface-hover: rgba(255, 255, 255, 0.03); --focus-ring: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: rgba(244, 114, 182, 0.16); @@ -311,7 +311,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; @@ -408,7 +408,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); @@ -452,9 +455,14 @@ background: #374151; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-autocomplete.p-autocomplete-clearable .p-inputtext { @@ -471,7 +479,7 @@ } p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { @@ -742,7 +750,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); @@ -796,7 +807,7 @@ } p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { @@ -828,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -858,7 +870,7 @@ } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-checkbox .p-checkbox-box { @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #fca5a5; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f472b6; } @@ -909,16 +925,16 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; margin: 0; } p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-chips.p-chips-clearable .p-inputtext { @@ -989,7 +1005,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,8 +1168,18 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputmask.p-inputmask-clearable .p-inputtext { @@ -1156,7 +1191,7 @@ } p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,8 +1259,8 @@ background: #f9a8d4; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { - border-color: #FCA5A5; + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { + border-color: #fca5a5; } .p-inputtext { @@ -1239,7 +1285,7 @@ border-color: #f472b6; } .p-inputtext.ng-dirty.ng-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; @@ -1257,7 +1303,7 @@ } .p-float-label > .ng-invalid.ng-dirty + label { - color: #FCA5A5; + color: #fca5a5; } .p-input-icon-left > .p-icon-wrapper.p-icon, @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1396,7 +1461,7 @@ } p-listbox.ng-dirty.ng-invalid > .p-listbox { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-multiselect { @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); @@ -1551,11 +1619,11 @@ } p-multiselect.ng-dirty.ng-invalid > .p-multiselect { - border-color: #FCA5A5; + border-color: #fca5a5; } p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1608,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #f472b6; @@ -1635,7 +1704,7 @@ } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-input-filled .p-radiobutton .p-radiobutton-box { @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1668,13 +1744,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); - border-color: #f472b6; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #f472b6; @@ -1683,7 +1758,7 @@ color: #f472b6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1725,7 +1800,7 @@ } p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-slider { @@ -1819,7 +1894,7 @@ } p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-treeselect { @@ -1860,7 +1935,7 @@ } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #f9a8d4; color: #030712; border-color: #f9a8d4; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #fbcfe8; color: #030712; border-color: #fbcfe8; @@ -1969,12 +2045,12 @@ color: #f472b6; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 114, 182, 0.04); color: #f472b6; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 114, 182, 0.16); color: #f472b6; border: 1px solid; @@ -1983,11 +2059,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } @@ -1996,12 +2072,12 @@ color: #f472b6; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 114, 182, 0.04); color: #f472b6; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(244, 114, 182, 0.16); color: #f472b6; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); @@ -2090,326 +2166,375 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-link { color: #f472b6; background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #f472b6; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.2); border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #f472b6; border-color: transparent; @@ -2483,266 +2608,27 @@ } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, .p-speeddial-semi-circle .p-speeddial-item:first-child, -.p-speeddial-semi-circle .p-speeddial-item:last-child, -.p-speeddial-quarter-circle .p-speeddial-item:first-child, -.p-speeddial-quarter-circle .p-speeddial-item:last-child { - margin: 0; - } - - .p-speeddial-mask { - background-color: rgba(0, 0, 0, 0.4); - } - - .p-splitbutton { - border-radius: 6px; - } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #f472b6; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 114, 182, 0.04); - color: #f472b6; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 114, 182, 0.16); - color: #f472b6; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - border-color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #f472b6; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 114, 182, 0.04); - color: #f472b6; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 114, 182, 0.16); - color: #f472b6; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 255, 255, 0.16); - color: rgba(255, 255, 255, 0.6); - } - .p-splitbutton.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-splitbutton.p-button-rounded { - border-radius: 2rem; - } - .p-splitbutton.p-button-rounded > .p-button { - border-radius: 2rem; - } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #94a3b8; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #94a3b8; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(148, 163, 184, 0.04); - border-color: transparent; - color: #94a3b8; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(148, 163, 184, 0.16); - border-color: transparent; - color: #94a3b8; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #38bdf8; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #38bdf8; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(56, 189, 248, 0.04); - border-color: transparent; - color: #38bdf8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(56, 189, 248, 0.16); - border-color: transparent; - color: #38bdf8; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #4ade80; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #4ade80; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(74, 222, 128, 0.04); - border-color: transparent; - color: #4ade80; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(74, 222, 128, 0.16); - border-color: transparent; - color: #4ade80; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #fb923c; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #fb923c; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 146, 60, 0.04); - border-color: transparent; - color: #fb923c; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 146, 60, 0.16); - border-color: transparent; - color: #fb923c; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #c084fc; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #c084fc; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(192, 132, 252, 0.04); - border-color: transparent; - color: #c084fc; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(192, 132, 252, 0.16); - border-color: transparent; - color: #c084fc; +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #f87171; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - color: #f87171; + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - color: #f87171; + + .p-splitbutton { + border-radius: 6px; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #f87171; - border-color: transparent; + .p-splitbutton.p-button-rounded { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(248, 113, 113, 0.04); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(248, 113, 113, 0.16); - border-color: transparent; - color: #f87171; + .p-splitbutton.p-button-raised { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2952,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3160,6 +3042,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); @@ -3213,14 +3098,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3133,13 @@ color: rgba(255, 255, 255, 0.6); } .p-orderlist .p-orderlist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3148,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3421,14 +3317,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1f2937; - color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3352,13 @@ color: rgba(255, 255, 255, 0.6); } .p-picklist .p-picklist-list { - border: 1px solid #424b57; - background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3367,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -4097,6 +4004,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } .p-splitter { @@ -4112,10 +4025,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(244, 114, 182, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f472b6; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #f472b6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4635,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4649,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4660,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4782,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4796,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4807,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4816,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4866,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } @@ -4812,7 +4906,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4920,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4931,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4907,7 +5004,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +5035,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5049,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5060,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4969,6 +5070,7 @@ border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -5151,7 +5253,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5267,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5278,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5337,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5351,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5362,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5548,7 @@ background: #374151; border: 1px solid #424b57; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5468,7 +5577,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5591,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5602,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5689,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5799,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -6006,6 +6118,103 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f472b6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #f472b6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6114,14 +6323,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 51e6af12e46..f8b3586152f 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -839,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #a78bfa; diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 5eec6888518..1b9b99e744c 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -839,6 +839,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #2dd4bf; diff --git a/src/assets/components/themes/lara-light-amber/theme.css b/src/assets/components/themes/lara-light-amber/theme.css index 2109183c552..796e7121105 100644 --- a/src/assets/components/themes/lara-light-amber/theme.css +++ b/src/assets/components/themes/lara-light-amber/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#ffffff; - --surface-b:#f9fafb; - --surface-c:#f3f4f6; - --surface-d:#e5e7eb; - --surface-e:#ffffff; - --surface-f:#ffffff; - --text-color:#4b5563; - --text-color-secondary:#6b7280; - --primary-color:#f59e0b; - --primary-color-text:#ffffff; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #ffffff; + --surface-b: #f9fafb; + --surface-c: #f3f4f6; + --surface-d: #e5e7eb; + --surface-e: #ffffff; + --surface-f: #ffffff; + --text-color: #4b5563; + --text-color-secondary: #6b7280; + --primary-color: #f59e0b; + --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #f9fafb; --surface-100: #f3f4f6; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#f9fafb; - --surface-section:#ffffff; - --surface-card:#ffffff; - --surface-overlay:#ffffff; - --surface-border:#dfe7ef; - --surface-hover:#f6f9fc; + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f9fafb; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #dfe7ef; + --surface-hover: #f6f9fc; --focus-ring: 0 0 0 0.2rem #fef08a; --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: #fffbeb; @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #b45309; background: #fffbeb; @@ -452,6 +455,11 @@ background: #ffffff; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: #4b5563; + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #b45309; background: #fffbeb; @@ -828,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #e24c4c; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f59e0b; } @@ -909,9 +925,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #b45309; background: #fffbeb; @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,6 +1168,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,7 +1259,7 @@ background: #d97706; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: #6b7280; } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #b45309; background: #fffbeb; @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #b45309; background: #fffbeb; @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; @@ -1608,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #f59e0b; @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1674,7 +1750,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; - border-color: #f59e0b; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #f59e0b; @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #d97706; color: #ffffff; border-color: #d97706; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #b45309; color: #ffffff; border-color: #b45309; @@ -1969,12 +2045,12 @@ color: #f59e0b; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(245, 158, 11, 0.04); color: #f59e0b; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border: 1px solid; @@ -1983,11 +2059,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1996,12 +2072,12 @@ color: #f59e0b; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(245, 158, 11, 0.04); color: #f59e0b; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; @@ -2090,305 +2166,305 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; - background: #64748B; - border: 1px solid #64748B; + background: #64748b; + border: 1px solid #64748b; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E2E8F0; + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e2e8f0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; - color: #64748B; + color: #64748b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BFDBFE; + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; - background: #22C55E; - border: 1px solid #22C55E; + background: #22c55e; + border: 1px solid #22c55e; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #16A34A; + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { + background: #16a34a; color: #ffffff; - border-color: #16A34A; + border-color: #16a34a; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BBF7D0; + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bbf7d0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #15803D; + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { + background: #15803d; color: #ffffff; - border-color: #15803D; + border-color: #15803d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; - color: #22C55E; + color: #22c55e; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FDE68A; + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fde68a; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; - background: #A855F7; - border: 1px solid #A855F7; + background: #a855f7; + border: 1px solid #a855f7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #9333EA; + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { + background: #9333ea; color: #ffffff; - border-color: #9333EA; + border-color: #9333ea; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E9D5FF; + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e9d5ff; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #7E22CE; + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { + background: #7e22ce; color: #ffffff; - border-color: #7E22CE; + border-color: #7e22ce; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; - color: #A855F7; + color: #a855f7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; - background: #EF4444; - border: 1px solid #EF4444; + background: #ef4444; + border: 1px solid #ef4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #DC2626; + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { + background: #dc2626; color: #ffffff; - border-color: #DC2626; + border-color: #dc2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FECACA; + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fecaca; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #B91C1C; + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { + background: #b91c1c; color: #ffffff; - border-color: #B91C1C; + border-color: #b91c1c; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; - color: #EF4444; + color: #ef4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; - color: #EF4444; + color: #ef4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; - color: #EF4444; + color: #ef4444; } .p-button.p-button-link { @@ -2396,20 +2472,20 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #b45309; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 0.2rem #fef08a; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #b45309; border-color: transparent; @@ -2496,253 +2572,14 @@ .p-splitbutton { border-radius: 6px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #f59e0b; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #f59e0b; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #f59e0b; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: #6b7280; - border-color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #f59e0b; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #f59e0b; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #f59e0b; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - } .p-splitbutton.p-button-rounded { border-radius: 2rem; } .p-splitbutton.p-button-rounded > .p-button { border-radius: 2rem; } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #64748B; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #0ea5e9; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #0ea5e9; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - border-color: transparent; - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - border-color: transparent; - color: #0ea5e9; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #22C55E; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #22C55E; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #f97316; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #f97316; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - border-color: transparent; - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - border-color: transparent; - color: #f97316; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #A855F7; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #A855F7; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; - } - - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + .p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2903,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -3160,6 +2993,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #b45309; background: #fffbeb; @@ -3213,14 +3049,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3084,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3099,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3421,14 +3268,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3303,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3318,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -4097,6 +3955,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; } .p-splitter { @@ -4112,10 +3976,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fffbeb; + color: #b45309; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f59e0b; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #f59e0b; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4586,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4600,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4611,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4733,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4747,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4758,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4767,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4817,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } @@ -4812,7 +4857,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4871,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4882,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4907,7 +4955,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +4986,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5000,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5011,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4969,6 +5021,7 @@ border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -5151,7 +5204,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5218,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5229,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5288,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5302,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5313,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5499,7 @@ background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -5468,7 +5528,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #b45309; } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b45309; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5542,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5553,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5640,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5750,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -5923,11 +5986,11 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #64748B; + background-color: #64748b; color: #ffffff; } .p-badge.p-badge-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-badge.p-badge-info { @@ -5939,7 +6002,7 @@ color: #ffffff; } .p-badge.p-badge-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-badge.p-badge-lg { @@ -6006,6 +6069,103 @@ box-shadow: 0 0 0 0.2rem #fef08a; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f59e0b; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #f59e0b; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6061,7 +6221,7 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-tag.p-tag-info { @@ -6073,7 +6233,7 @@ color: #ffffff; } .p-tag.p-tag-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-tag .p-tag-icon { @@ -6114,14 +6274,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index e85e0ca3496..b9a23e9a733 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -839,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #3B82F6; diff --git a/src/assets/components/themes/lara-light-cyan/theme.css b/src/assets/components/themes/lara-light-cyan/theme.css index 04dd95032c7..91fe6c82eb2 100644 --- a/src/assets/components/themes/lara-light-cyan/theme.css +++ b/src/assets/components/themes/lara-light-cyan/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#ffffff; - --surface-b:#f9fafb; - --surface-c:#f3f4f6; - --surface-d:#e5e7eb; - --surface-e:#ffffff; - --surface-f:#ffffff; - --text-color:#4b5563; - --text-color-secondary:#6b7280; - --primary-color:#06b6d4; - --primary-color-text:#ffffff; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #ffffff; + --surface-b: #f9fafb; + --surface-c: #f3f4f6; + --surface-d: #e5e7eb; + --surface-e: #ffffff; + --surface-f: #ffffff; + --text-color: #4b5563; + --text-color-secondary: #6b7280; + --primary-color: #06b6d4; + --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #f9fafb; --surface-100: #f3f4f6; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#f9fafb; - --surface-section:#ffffff; - --surface-card:#ffffff; - --surface-overlay:#ffffff; - --surface-border:#dfe7ef; - --surface-hover:#f6f9fc; + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f9fafb; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #dfe7ef; + --surface-hover: #f6f9fc; --focus-ring: 0 0 0 0.2rem #a5f3fc; --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: #ecfeff; @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #0e7490; background: #ecfeff; @@ -452,6 +455,11 @@ background: #ffffff; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: #4b5563; + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #0e7490; background: #ecfeff; @@ -828,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #e24c4c; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #06b6d4; } @@ -909,9 +925,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #0e7490; background: #ecfeff; @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,6 +1168,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,7 +1259,7 @@ background: #0891b2; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: #6b7280; } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #0e7490; background: #ecfeff; @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #0e7490; background: #ecfeff; @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; @@ -1608,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #06b6d4; @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1674,7 +1750,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; - border-color: #06b6d4; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #06b6d4; @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #0891b2; color: #ffffff; border-color: #0891b2; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #0e7490; color: #ffffff; border-color: #0e7490; @@ -1969,12 +2045,12 @@ color: #06b6d4; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(6, 182, 212, 0.04); color: #06b6d4; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(6, 182, 212, 0.16); color: #06b6d4; border: 1px solid; @@ -1983,11 +2059,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1996,12 +2072,12 @@ color: #06b6d4; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(6, 182, 212, 0.04); color: #06b6d4; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(6, 182, 212, 0.16); color: #06b6d4; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; @@ -2090,305 +2166,305 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; - background: #64748B; - border: 1px solid #64748B; + background: #64748b; + border: 1px solid #64748b; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E2E8F0; + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e2e8f0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; - color: #64748B; + color: #64748b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BFDBFE; + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; - background: #22C55E; - border: 1px solid #22C55E; + background: #22c55e; + border: 1px solid #22c55e; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #16A34A; + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { + background: #16a34a; color: #ffffff; - border-color: #16A34A; + border-color: #16a34a; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BBF7D0; + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bbf7d0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #15803D; + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { + background: #15803d; color: #ffffff; - border-color: #15803D; + border-color: #15803d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; - color: #22C55E; + color: #22c55e; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FDE68A; + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fde68a; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; - background: #A855F7; - border: 1px solid #A855F7; + background: #a855f7; + border: 1px solid #a855f7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #9333EA; + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { + background: #9333ea; color: #ffffff; - border-color: #9333EA; + border-color: #9333ea; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E9D5FF; + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e9d5ff; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #7E22CE; + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { + background: #7e22ce; color: #ffffff; - border-color: #7E22CE; + border-color: #7e22ce; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; - color: #A855F7; + color: #a855f7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; - background: #EF4444; - border: 1px solid #EF4444; + background: #ef4444; + border: 1px solid #ef4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #DC2626; + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { + background: #dc2626; color: #ffffff; - border-color: #DC2626; + border-color: #dc2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FECACA; + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fecaca; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #B91C1C; + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { + background: #b91c1c; color: #ffffff; - border-color: #B91C1C; + border-color: #b91c1c; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; - color: #EF4444; + color: #ef4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; - color: #EF4444; + color: #ef4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; - color: #EF4444; + color: #ef4444; } .p-button.p-button-link { @@ -2396,20 +2472,20 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #0e7490; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #0e7490; border-color: transparent; @@ -2496,253 +2572,14 @@ .p-splitbutton { border-radius: 6px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #06b6d4; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(6, 182, 212, 0.04); - color: #06b6d4; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(6, 182, 212, 0.16); - color: #06b6d4; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: #6b7280; - border-color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #06b6d4; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(6, 182, 212, 0.04); - color: #06b6d4; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(6, 182, 212, 0.16); - color: #06b6d4; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - } .p-splitbutton.p-button-rounded { border-radius: 2rem; } .p-splitbutton.p-button-rounded > .p-button { border-radius: 2rem; } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #64748B; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #0ea5e9; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #0ea5e9; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - border-color: transparent; - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - border-color: transparent; - color: #0ea5e9; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #22C55E; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #22C55E; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #f97316; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #f97316; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - border-color: transparent; - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - border-color: transparent; - color: #f97316; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #A855F7; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #A855F7; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; - } - - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + .p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2903,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -3160,6 +2993,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #0e7490; background: #ecfeff; @@ -3213,14 +3049,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3084,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3099,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3421,14 +3268,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3303,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3318,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -4097,6 +3955,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; } .p-splitter { @@ -4112,10 +3976,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ecfeff; + color: #0e7490; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #06b6d4; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #06b6d4; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4586,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4600,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4611,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4733,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4747,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4758,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4767,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4817,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } @@ -4812,7 +4857,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4871,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4882,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4907,7 +4955,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +4986,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5000,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5011,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4969,6 +5021,7 @@ border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -5151,7 +5204,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5218,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5229,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5288,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5302,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5313,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5499,7 @@ background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -5468,7 +5528,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0e7490; } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0e7490; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5542,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5553,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5640,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5750,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -5923,11 +5986,11 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #64748B; + background-color: #64748b; color: #ffffff; } .p-badge.p-badge-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-badge.p-badge-info { @@ -5939,7 +6002,7 @@ color: #ffffff; } .p-badge.p-badge-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-badge.p-badge-lg { @@ -6006,6 +6069,103 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #06b6d4; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #06b6d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6061,7 +6221,7 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-tag.p-tag-info { @@ -6073,7 +6233,7 @@ color: #ffffff; } .p-tag.p-tag-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-tag .p-tag-icon { @@ -6114,14 +6274,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-light-green/theme.css b/src/assets/components/themes/lara-light-green/theme.css index 245596a2b5f..b3a97e2df62 100644 --- a/src/assets/components/themes/lara-light-green/theme.css +++ b/src/assets/components/themes/lara-light-green/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#ffffff; - --surface-b:#f9fafb; - --surface-c:#f3f4f6; - --surface-d:#e5e7eb; - --surface-e:#ffffff; - --surface-f:#ffffff; - --text-color:#4b5563; - --text-color-secondary:#6b7280; - --primary-color:#10b981; - --primary-color-text:#ffffff; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #ffffff; + --surface-b: #f9fafb; + --surface-c: #f3f4f6; + --surface-d: #e5e7eb; + --surface-e: #ffffff; + --surface-f: #ffffff; + --text-color: #4b5563; + --text-color-secondary: #6b7280; + --primary-color: #10b981; + --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #f9fafb; --surface-100: #f3f4f6; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#f9fafb; - --surface-section:#ffffff; - --surface-card:#ffffff; - --surface-overlay:#ffffff; - --surface-border:#dfe7ef; - --surface-hover:#f6f9fc; + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f9fafb; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #dfe7ef; + --surface-hover: #f6f9fc; --focus-ring: 0 0 0 0.2rem #a7f3d0; --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: #F0FDFA; @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #047857; background: #F0FDFA; @@ -452,6 +455,11 @@ background: #ffffff; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: #4b5563; + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #047857; background: #F0FDFA; @@ -828,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #e24c4c; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #10b981; } @@ -909,9 +925,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #047857; background: #F0FDFA; @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,6 +1168,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,7 +1259,7 @@ background: #059669; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: #6b7280; } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #047857; background: #F0FDFA; @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #047857; background: #F0FDFA; @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; @@ -1608,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #10b981; @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1674,7 +1750,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #10b981; @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #059669; color: #ffffff; border-color: #059669; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #047857; color: #ffffff; border-color: #047857; @@ -1969,12 +2045,12 @@ color: #10b981; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(16, 185, 129, 0.04); color: #10b981; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(16, 185, 129, 0.16); color: #10b981; border: 1px solid; @@ -1983,11 +2059,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1996,12 +2072,12 @@ color: #10b981; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(16, 185, 129, 0.04); color: #10b981; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(16, 185, 129, 0.16); color: #10b981; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; @@ -2090,305 +2166,305 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; - background: #64748B; - border: 1px solid #64748B; + background: #64748b; + border: 1px solid #64748b; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E2E8F0; + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e2e8f0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; - color: #64748B; + color: #64748b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BFDBFE; + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; - background: #22C55E; - border: 1px solid #22C55E; + background: #22c55e; + border: 1px solid #22c55e; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #16A34A; + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { + background: #16a34a; color: #ffffff; - border-color: #16A34A; + border-color: #16a34a; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BBF7D0; + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bbf7d0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #15803D; + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { + background: #15803d; color: #ffffff; - border-color: #15803D; + border-color: #15803d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; - color: #22C55E; + color: #22c55e; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FDE68A; + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fde68a; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; - background: #A855F7; - border: 1px solid #A855F7; + background: #a855f7; + border: 1px solid #a855f7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #9333EA; + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { + background: #9333ea; color: #ffffff; - border-color: #9333EA; + border-color: #9333ea; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E9D5FF; + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e9d5ff; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #7E22CE; + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { + background: #7e22ce; color: #ffffff; - border-color: #7E22CE; + border-color: #7e22ce; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; - color: #A855F7; + color: #a855f7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; - background: #EF4444; - border: 1px solid #EF4444; + background: #ef4444; + border: 1px solid #ef4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #DC2626; + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { + background: #dc2626; color: #ffffff; - border-color: #DC2626; + border-color: #dc2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FECACA; + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fecaca; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #B91C1C; + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { + background: #b91c1c; color: #ffffff; - border-color: #B91C1C; + border-color: #b91c1c; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; - color: #EF4444; + color: #ef4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; - color: #EF4444; + color: #ef4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; - color: #EF4444; + color: #ef4444; } .p-button.p-button-link { @@ -2396,20 +2472,20 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #047857; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #047857; border-color: transparent; @@ -2496,253 +2572,14 @@ .p-splitbutton { border-radius: 6px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #10b981; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(16, 185, 129, 0.04); - color: #10b981; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(16, 185, 129, 0.16); - color: #10b981; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: #6b7280; - border-color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #10b981; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(16, 185, 129, 0.04); - color: #10b981; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(16, 185, 129, 0.16); - color: #10b981; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - } .p-splitbutton.p-button-rounded { border-radius: 2rem; } .p-splitbutton.p-button-rounded > .p-button { border-radius: 2rem; } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #64748B; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #0ea5e9; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #0ea5e9; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - border-color: transparent; - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - border-color: transparent; - color: #0ea5e9; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #22C55E; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #22C55E; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #f97316; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #f97316; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - border-color: transparent; - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - border-color: transparent; - color: #f97316; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #A855F7; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #A855F7; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; - } - - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + .p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2903,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -3160,6 +2993,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #047857; background: #F0FDFA; @@ -3213,14 +3049,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3084,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3099,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3421,14 +3268,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3303,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3318,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -4097,6 +3955,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-splitter { @@ -4112,10 +3976,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #F0FDFA; + color: #047857; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #10b981; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #10b981; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4586,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4600,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4611,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4733,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4747,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4758,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4767,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4817,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } @@ -4812,7 +4857,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4871,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4882,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4907,7 +4955,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +4986,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5000,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5011,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4969,6 +5021,7 @@ border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -5151,7 +5204,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5218,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5229,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5288,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5302,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5313,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5499,7 @@ background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -5468,7 +5528,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5542,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5553,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5640,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5750,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -5923,11 +5986,11 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #64748B; + background-color: #64748b; color: #ffffff; } .p-badge.p-badge-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-badge.p-badge-info { @@ -5939,7 +6002,7 @@ color: #ffffff; } .p-badge.p-badge-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-badge.p-badge-lg { @@ -6006,6 +6069,103 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #10b981; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #10b981; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6061,7 +6221,7 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-tag.p-tag-info { @@ -6073,7 +6233,7 @@ color: #ffffff; } .p-tag.p-tag-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-tag .p-tag-icon { @@ -6114,14 +6274,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 46c9688bf68..c5e62a7d338 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -839,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #6366F1; diff --git a/src/assets/components/themes/lara-light-pink/theme.css b/src/assets/components/themes/lara-light-pink/theme.css index e72eb7f3454..dcab0f63274 100644 --- a/src/assets/components/themes/lara-light-pink/theme.css +++ b/src/assets/components/themes/lara-light-pink/theme.css @@ -2,18 +2,18 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family:"Inter var", sans-serif; - --font-feature-settings: "cv02","cv03","cv04","cv11"; - --surface-a:#ffffff; - --surface-b:#f9fafb; - --surface-c:#f3f4f6; - --surface-d:#e5e7eb; - --surface-e:#ffffff; - --surface-f:#ffffff; - --text-color:#4b5563; - --text-color-secondary:#6b7280; - --primary-color:#ec4899; - --primary-color-text:#ffffff; + --font-family: "Inter var", sans-serif; + --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --surface-a: #ffffff; + --surface-b: #f9fafb; + --surface-c: #f3f4f6; + --surface-d: #e5e7eb; + --surface-e: #ffffff; + --surface-f: #ffffff; + --text-color: #4b5563; + --text-color-secondary: #6b7280; + --primary-color: #ec4899; + --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #f9fafb; --surface-100: #f3f4f6; @@ -35,15 +35,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; - --content-padding:1.25rem; - --inline-spacing:0.5rem; - --border-radius:6px; - --surface-ground:#f9fafb; - --surface-section:#ffffff; - --surface-card:#ffffff; - --surface-overlay:#ffffff; - --surface-border:#dfe7ef; - --surface-hover:#f6f9fc; + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f9fafb; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #dfe7ef; + --surface-hover: #f6f9fc; --focus-ring: 0 0 0 0.2rem #fbcfe8; --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: #fdf2f8; @@ -387,9 +387,9 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -430,6 +430,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #be185d; background: #fdf2f8; @@ -452,6 +455,11 @@ background: #ffffff; font-weight: 700; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message { + padding: 0.75rem 1.25rem; + color: #4b5563; + background: transparent; + } p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; @@ -763,6 +771,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #be185d; background: #fdf2f8; @@ -828,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -878,6 +890,10 @@ margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { + border-color: #e24c4c; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ec4899; } @@ -909,9 +925,9 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: inherit; - font-feature-settings: inherit; - font-size: inherit; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; color: #4b5563; padding: 0; margin: 0; @@ -1028,6 +1044,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #be185d; background: #fdf2f8; @@ -1069,6 +1088,16 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1083,27 +1112,23 @@ } .p-inputgroup > .p-component, -.p-inputgroup > .p-element, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, +.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-element + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, -.p-inputgroup > .p-element:focus, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-element:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } @@ -1143,6 +1168,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } @@ -1174,6 +1209,17 @@ right: 3.75rem; } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1213,7 +1259,7 @@ background: #db2777; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } @@ -1284,6 +1330,18 @@ padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } + ::-webkit-input-placeholder { color: #6b7280; } @@ -1358,6 +1416,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #be185d; background: #fdf2f8; @@ -1382,12 +1443,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox.p-focus { outline: 0 none; outline-offset: 0; @@ -1509,6 +1574,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #be185d; background: #fdf2f8; @@ -1518,7 +1586,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; @@ -1608,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #ec4899; @@ -1658,6 +1727,13 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + border-radius: 50%; + outline-color: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1674,7 +1750,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; - border-color: #ec4899; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ec4899; @@ -1953,13 +2028,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #db2777; color: #ffffff; border-color: #db2777; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #be185d; color: #ffffff; border-color: #be185d; @@ -1969,12 +2045,12 @@ color: #ec4899; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(236, 72, 153, 0.04); color: #ec4899; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(236, 72, 153, 0.16); color: #ec4899; border: 1px solid; @@ -1983,11 +2059,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1996,12 +2072,12 @@ color: #ec4899; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(236, 72, 153, 0.04); color: #ec4899; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(236, 72, 153, 0.16); color: #ec4899; border-color: transparent; @@ -2009,15 +2085,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; @@ -2090,305 +2166,305 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; - background: #64748B; - border: 1px solid #64748B; + background: #64748b; + border: 1px solid #64748b; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E2E8F0; + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e2e8f0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); - color: #64748B; + color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; - color: #64748B; + color: #64748b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; - color: #64748B; + color: #64748b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BFDBFE; + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; - background: #22C55E; - border: 1px solid #22C55E; + background: #22c55e; + border: 1px solid #22c55e; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #16A34A; + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { + background: #16a34a; color: #ffffff; - border-color: #16A34A; + border-color: #16a34a; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #BBF7D0; + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #bbf7d0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #15803D; + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { + background: #15803d; color: #ffffff; - border-color: #15803D; + border-color: #15803d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); - color: #22C55E; + color: #22c55e; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; - color: #22C55E; + color: #22c55e; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; - color: #22C55E; + color: #22c55e; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FDE68A; + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fde68a; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; - background: #A855F7; - border: 1px solid #A855F7; + background: #a855f7; + border: 1px solid #a855f7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #9333EA; + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { + background: #9333ea; color: #ffffff; - border-color: #9333EA; + border-color: #9333ea; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #E9D5FF; + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #e9d5ff; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #7E22CE; + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { + background: #7e22ce; color: #ffffff; - border-color: #7E22CE; + border-color: #7e22ce; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); - color: #A855F7; + color: #a855f7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; - color: #A855F7; + color: #a855f7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; - color: #A855F7; + color: #a855f7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; - background: #EF4444; - border: 1px solid #EF4444; + background: #ef4444; + border: 1px solid #ef4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #DC2626; + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { + background: #dc2626; color: #ffffff; - border-color: #DC2626; + border-color: #dc2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #FECACA; + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { + box-shadow: 0 0 0 0.2rem #fecaca; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #B91C1C; + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { + background: #b91c1c; color: #ffffff; - border-color: #B91C1C; + border-color: #b91c1c; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); - color: #EF4444; + color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; - color: #EF4444; + color: #ef4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; - color: #EF4444; + color: #ef4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; - color: #EF4444; + color: #ef4444; } .p-button.p-button-link { @@ -2396,20 +2472,20 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #be185d; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #be185d; border-color: transparent; @@ -2496,253 +2572,14 @@ .p-splitbutton { border-radius: 6px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #ec4899; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(236, 72, 153, 0.04); - color: #ec4899; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(236, 72, 153, 0.16); - color: #ec4899; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button { - color: #6b7280; - border-color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #ec4899; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(236, 72, 153, 0.04); - color: #ec4899; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(236, 72, 153, 0.16); - color: #ec4899; - border-color: transparent; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button { - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #e5e7eb; - color: #6b7280; - } - .p-splitbutton.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - } .p-splitbutton.p-button-rounded { border-radius: 2rem; } .p-splitbutton.p-button-rounded > .p-button { border-radius: 2rem; } - .p-splitbutton.p-button-sm > .p-button { - font-size: 0.875rem; - padding: 0.65625rem 1.09375rem; - } - .p-splitbutton.p-button-sm > .p-button .p-button-icon { - font-size: 0.875rem; - } - .p-splitbutton.p-button-lg > .p-button { - font-size: 1.25rem; - padding: 0.9375rem 1.5625rem; - } - .p-splitbutton.p-button-lg > .p-button .p-button-icon { - font-size: 1.25rem; - } - - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #64748B; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; - } - - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #0ea5e9; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #0ea5e9; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(14, 165, 233, 0.04); - border-color: transparent; - color: #0ea5e9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(14, 165, 233, 0.16); - border-color: transparent; - color: #0ea5e9; - } - - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #22C55E; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #22C55E; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; - } - - .p-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #f97316; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #f97316; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(249, 115, 22, 0.04); - border-color: transparent; - color: #f97316; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(249, 115, 22, 0.16); - border-color: transparent; - color: #f97316; - } - - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #A855F7; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #A855F7; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; - } - - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; - } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + .p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-carousel .p-carousel-content .p-carousel-prev, @@ -3066,10 +2903,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -3160,6 +2993,9 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #be185d; background: #fdf2f8; @@ -3213,14 +3049,23 @@ .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } .p-orderlist .p-orderlist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-orderlist .p-orderlist-header .p-orderlist-title { font-weight: 700; @@ -3239,14 +3084,13 @@ color: #6b7280; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3255,6 +3099,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3421,14 +3268,23 @@ .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } .p-picklist .p-picklist-header { - background: #f9fafb; color: #374151; - border: 1px solid #e5e7eb; padding: 1.25rem; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; + font-weight: 700; } .p-picklist .p-picklist-header .p-picklist-title { font-weight: 700; @@ -3447,14 +3303,13 @@ color: #6b7280; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #4b5563; padding: 0.75rem 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3463,6 +3318,9 @@ background: transparent; transition: box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -4097,6 +3955,12 @@ .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; } .p-splitter { @@ -4112,10 +3976,183 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fdf2f8; + color: #be185d; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ec4899; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ec4899; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4549,7 +4586,8 @@ .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4600,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4572,7 +4611,8 @@ .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4693,7 +4733,8 @@ .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4706,7 +4747,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4716,7 +4758,8 @@ .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4724,6 +4767,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4773,7 +4817,8 @@ .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } @@ -4812,7 +4857,8 @@ .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4825,7 +4871,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +4882,8 @@ .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4907,7 +4955,8 @@ .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4937,7 +4986,8 @@ .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5000,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4960,7 +5011,8 @@ .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4969,6 +5021,7 @@ border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -5151,7 +5204,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5164,7 +5218,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5174,7 +5229,8 @@ .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5232,7 +5288,8 @@ .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5245,7 +5302,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5255,7 +5313,8 @@ .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5440,6 +5499,7 @@ background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -5468,7 +5528,8 @@ .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #be185d; } - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #be185d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5481,7 +5542,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5491,7 +5553,8 @@ .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #4b5563; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5577,7 +5640,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-message .p-message-close:focus-visible { outline: 0 none; @@ -5687,7 +5750,7 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.5); } .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; @@ -5923,11 +5986,11 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #64748B; + background-color: #64748b; color: #ffffff; } .p-badge.p-badge-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-badge.p-badge-info { @@ -5939,7 +6002,7 @@ color: #ffffff; } .p-badge.p-badge-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-badge.p-badge-lg { @@ -6006,6 +6069,103 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ec4899; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #ec4899; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6061,7 +6221,7 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #22C55E; + background-color: #22c55e; color: #ffffff; } .p-tag.p-tag-info { @@ -6073,7 +6233,7 @@ color: #ffffff; } .p-tag.p-tag-danger { - background-color: #EF4444; + background-color: #ef4444; color: #ffffff; } .p-tag .p-tag-icon { @@ -6114,14 +6274,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 22fb7bdac54..3c054be2019 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -839,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #8B5CF6; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 342b7735064..f39797f0b33 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -839,6 +839,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1675,6 +1676,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #14b8a6; diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 42f7a0aad8e..4a22e9817c3 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -822,6 +822,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1662,6 +1663,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFE082; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 29c57d24821..557eaa0dbf3 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -822,6 +822,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1662,6 +1663,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #81D4FA; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index c189ed2c899..b57e9cba2ac 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -822,6 +822,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1662,6 +1663,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #C5E1A5; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index b622659f65a..ed37313a33e 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -822,6 +822,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1662,6 +1663,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #F48FB1; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index e3bb255913f..b9445da2165 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -845,6 +845,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(255, 255, 255, 0.6); diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index ca9cf363c89..dba2ef2df8f 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -845,6 +845,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(255, 255, 255, 0.6); diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 8ec59e6c9f6..e5caaebfaf0 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -845,6 +845,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(0, 0, 0, 0.87); diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 13f04307593..cab1edbc080 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -845,6 +845,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(0, 0, 0, 0.87); diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 46c685535f2..3bc757c53e6 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -845,6 +845,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(255, 255, 255, 0.6); diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 3e89a14c1bb..e750a581a06 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -845,6 +845,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(255, 255, 255, 0.6); diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index fe1f76bc210..a620b67f4d1 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -845,6 +845,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(0, 0, 0, 0.87); diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index b4bdd210f63..e136a2fb611 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -845,6 +845,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1681,6 +1682,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: rgba(0, 0, 0, 0.87); diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index 2a532b204f3..f79b95eb914 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -848,6 +848,7 @@ color: #4c566a; border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1684,6 +1685,7 @@ color: #4c566a; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #81a1c1; diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index ac842883943..e22858acef4 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -822,6 +822,7 @@ color: #343a3f; border-radius: 1px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #343a3f; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #1174c0; diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 6af62a92637..ad348ef1802 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -822,6 +822,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index a3525e67fc4..9d699f00e78 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -822,6 +822,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1662,6 +1663,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index ceabf954404..369de800548 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -822,6 +822,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1662,6 +1663,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 46674fe9f70..5088cbba436 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -822,6 +822,7 @@ color: #666666; border-radius: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #666666; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #a6a6a6; diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index d8c5ca5d6ef..cad9241b915 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -822,6 +822,7 @@ color: #495057; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #2196F3; diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index bbd741bdce5..a105694c97c 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -822,6 +822,7 @@ color: #495057; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #4CAF50; diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index d5803c1fa61..fbca5e329e7 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -822,6 +822,7 @@ color: #495057; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFC107; diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 607c499224b..125486054a7 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -822,6 +822,7 @@ color: #495057; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #9C27B0; diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index 5a606f47fec..5034da566fc 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -844,6 +844,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1680,6 +1681,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #b19df7; diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index c90a16810aa..9b67bacb7e9 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -844,6 +844,7 @@ color: #043d75; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1680,6 +1681,7 @@ color: #043d75; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #7254f3; diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index dd915d9867d..fadfd01e21e 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #64B5F6; diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index f63a6ad1f15..a2c4f809e11 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #81C784; diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 441063266c6..d2b2d4975d4 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFD54F; diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 925d5ee4d9d..f27f06ba8d6 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -822,6 +822,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -1658,6 +1659,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #BA68C8; diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 8c40f0e0d50..7144577c2aa 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -852,6 +852,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -1688,6 +1689,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #2d3e44; diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index ade193ebda5..a6babe6adc2 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -853,6 +853,7 @@ color: #6c6c6c; border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -1689,6 +1690,7 @@ color: #6c6c6c; border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #cecece;