From 54053cb6b3693df329028c35526f4b6b88626d1c Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 14 Oct 2023 01:09:30 +0300 Subject: [PATCH] Consistent focus-visible states --- assets/styles/layout/_core.scss | 6 +- assets/styles/layout/_doc.scss | 7 +- assets/styles/layout/_docsearch.scss | 3 +- assets/styles/layout/_footer.scss | 5 + assets/styles/layout/_mixins.scss | 7 ++ assets/styles/layout/_responsive.scss | 2 +- assets/styles/layout/_sidebar.scss | 3 + assets/styles/layout/_topbar.scss | 12 ++ assets/styles/layout/landing/_footer.scss | 5 + assets/styles/layout/landing/_landing.scss | 2 + assets/styles/layout/landing/_main.scss | 4 +- assets/styles/layout/layout.scss | 1 + pages/landing/FooterSection.vue | 28 ++--- pages/landing/HeroSection.vue | 3 +- public/themes/lara-light-teal/theme.css | 122 ++++++++++----------- 15 files changed, 121 insertions(+), 89 deletions(-) create mode 100644 assets/styles/layout/_mixins.scss create mode 100644 assets/styles/layout/landing/_footer.scss diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index d1c33e4f7..20663e670 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -84,12 +84,8 @@ input[type="number"] { border: none; cursor: pointer; user-select: none; -} -.px-link:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: var(--focus-ring); + @include focus-visible(); } .px-link:disabled { diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index a16524c78..e319638c2 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -1,15 +1,13 @@ .doc-tabmenu { list-style: none; margin: 0 17rem 0 0; - padding: 0 0 1px 0; + padding: 0; display: flex; margin-bottom: 2rem; border-bottom: 1px solid var(--surface-border); - overflow: auto; + overflow: visible; li { - margin-bottom: -1px; - button { background-color: transparent; border: 0 none; @@ -21,6 +19,7 @@ letter-spacing: 1px; cursor: pointer; margin: 0; + margin: 0 0 -1px 0; transition: all 0.2s; border-bottom: 1px solid transparent; border-top-right-radius: var(--border-round); diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss index 0b6602e44..9ca5433fc 100644 --- a/assets/styles/layout/_docsearch.scss +++ b/assets/styles/layout/_docsearch.scss @@ -4,8 +4,9 @@ height: 2rem; background-color: var(--surface-card); margin: 0; - transition: border-color .3s; + transition: all .3s; padding: 0 .5rem; + @include focus-visible(); &:hover { border-color: var(--primary-color); diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss index 5f3bb5b73..0eb285db1 100644 --- a/assets/styles/layout/_footer.scss +++ b/assets/styles/layout/_footer.scss @@ -12,9 +12,14 @@ a { color: var(--primary-color); font-weight: 700; + transition: all .3s; + border-radius: var(--border-radius); + + @include focus-visible(); &:hover { text-decoration: underline; } + } } \ No newline at end of file diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss new file mode 100644 index 000000000..2c088ffad --- /dev/null +++ b/assets/styles/layout/_mixins.scss @@ -0,0 +1,7 @@ +@mixin focus-visible($type:null) { + &:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: $type var(--focus-ring); + } +} \ No newline at end of file diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss index 16513d5f3..e6c5fc1d8 100644 --- a/assets/styles/layout/_responsive.scss +++ b/assets/styles/layout/_responsive.scss @@ -148,7 +148,7 @@ } .layout-topbar-icon { - display: block; + display: inline-flex; } } diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index cb304fbc6..595991f81 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -39,6 +39,7 @@ color: var(--surface-900); font-weight: 600; transition: all .2s; + border-radius: var(--border-radius); .menu-icon { width: 2rem; @@ -83,6 +84,8 @@ } } } + + @include focus-visible(inset); } > div { diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index 84ce69f51..ae6c0c457 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -24,7 +24,19 @@ margin-right: 4rem; } + .layout-topbar-logo, + .layout-topbar-icon { + border-radius: var(--border-radius); + @include focus-visible(); + + svg { + width: 120px; + } + } + .layout-topbar-logo { + display: inline-flex; + svg { width: 120px; } diff --git a/assets/styles/layout/landing/_footer.scss b/assets/styles/layout/landing/_footer.scss new file mode 100644 index 000000000..3b97a5c68 --- /dev/null +++ b/assets/styles/layout/landing/_footer.scss @@ -0,0 +1,5 @@ +.landing-footer { + a { + @include focus-visible(); + } +} \ No newline at end of file diff --git a/assets/styles/layout/landing/_landing.scss b/assets/styles/layout/landing/_landing.scss index b155a338f..a882fcdb2 100644 --- a/assets/styles/layout/landing/_landing.scss +++ b/assets/styles/layout/landing/_landing.scss @@ -2,6 +2,7 @@ $landingBreakpointMD: 767px; $landingBreakpointLG: 991px; $landingBreakpointXL: 1199px; +@import '../_mixins'; @import './_main'; @import './_light'; @import './_dark'; @@ -12,3 +13,4 @@ $landingBreakpointXL: 1199px; @import './_blocks'; @import './_templates'; @import './_features'; +@import './_footer'; diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss index c08a0a5a9..fa4bf3bfc 100644 --- a/assets/styles/layout/landing/_main.scss +++ b/assets/styles/layout/landing/_main.scss @@ -10,7 +10,7 @@ } .linkbox { - transition: background-color 0.3s; + transition: all 0.3s; display: inline-flex; align-items: center; color: var(--home-linkbox-text-color); @@ -19,6 +19,8 @@ background-color: var(--home-linkbox-bg); border-radius: 10px; cursor: pointer; + + @include focus-visible(); &:hover { background: var(--home-linkbox-hover-bg); diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss index 0a3624e8b..74f723e75 100644 --- a/assets/styles/layout/layout.scss +++ b/assets/styles/layout/layout.scss @@ -1,5 +1,6 @@ @charset 'UTF-8'; +@import './_mixins'; @import './_core'; @import './_glow'; @import './_topbar'; diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue index 4a44e0a59..1aa8bd336 100644 --- a/pages/landing/FooterSection.vue +++ b/pages/landing/FooterSection.vue @@ -6,7 +6,7 @@ @@ -14,13 +14,13 @@ @@ -28,25 +28,25 @@ @@ -54,13 +54,13 @@ diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue index 1294b408b..b4e4099e9 100644 --- a/pages/landing/HeroSection.vue +++ b/pages/landing/HeroSection.vue @@ -4,8 +4,7 @@

The Most Complete UI Suite for Vue.js

- Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI ecosystem. Craft elegant interfaces effortlessly, and delight your users with smooth interactions and captivating visuals. With - PrimeVue, turning your development vision into reality has never been easier. + Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.

diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index e9df29727..dcfffceff 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -44,7 +44,7 @@ --surface-overlay:#ffffff; --surface-border:#dfe7ef; --surface-hover:#f6f9fc; - --focus-ring: 0 0 0 0.2rem #ecfdf5; + --focus-ring: 0 0 0 0.2rem #a7f3d0; --maskbg: rgba(0, 0, 0, 0.4); --highlight-bg: #F0FDFA; --highlight-text-color: #047857; @@ -336,7 +336,7 @@ .p-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-component-overlay-enter { @@ -376,7 +376,7 @@ .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-autocomplete .p-autocomplete-multiple-container { @@ -459,7 +459,7 @@ .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } @@ -508,7 +508,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; @@ -555,7 +555,7 @@ .p-datepicker table td > span:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-datepicker table td.p-datepicker-today > span { background: #d1d5db; @@ -594,7 +594,7 @@ .p-datepicker .p-timepicker button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-datepicker .p-timepicker button:last-child { margin-top: 0.2em; @@ -652,7 +652,7 @@ .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; @@ -660,7 +660,7 @@ .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; @@ -668,7 +668,7 @@ .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } @media screen and (max-width: 769px) { @@ -688,7 +688,7 @@ .p-cascadeselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-cascadeselect .p-cascadeselect-label { @@ -796,7 +796,7 @@ .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { @@ -827,7 +827,7 @@ .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-chips .p-chips-multiple-container { @@ -892,7 +892,7 @@ .p-dropdown:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-dropdown.p-dropdown-clearable .p-dropdown-label { @@ -1099,7 +1099,7 @@ .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #b9bfc8; @@ -1135,7 +1135,7 @@ .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-inputtext.p-invalid.p-component { @@ -1285,7 +1285,7 @@ .p-listbox.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-listbox.p-invalid { @@ -1304,7 +1304,7 @@ .p-multiselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-multiselect .p-multiselect-label { @@ -1383,7 +1383,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-multiselect-panel .p-multiselect-items { padding: 0.75rem 0; @@ -1483,7 +1483,7 @@ .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { @@ -1539,7 +1539,7 @@ .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { @@ -1623,7 +1623,7 @@ .p-slider .p-slider-handle:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-slider .p-slider-range { background: #10b981; @@ -1645,7 +1645,7 @@ .p-treeselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-treeselect .p-treeselect-label { @@ -1716,7 +1716,7 @@ .p-togglebutton.p-button:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1825,7 +1825,7 @@ .p-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-button .p-button-label { transition-duration: 0.2s; @@ -2211,7 +2211,7 @@ } .p-button.p-button-link:enabled:focus { background: transparent; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: transparent; } .p-button.p-button-link:enabled:active { @@ -2239,7 +2239,7 @@ .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-speeddial-action { @@ -2578,7 +2578,7 @@ .p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -2680,7 +2680,7 @@ color: #047857; } .p-datatable .p-sortable-column:focus-visible { - box-shadow: inset 0 0 0 0.15rem #ecfdf5; + box-shadow: inset 0 0 0 0.15rem #a7f3d0; outline: 0 none; } .p-datatable .p-datatable-tbody > tr { @@ -2720,7 +2720,7 @@ .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { margin-right: 0.5rem; @@ -2729,7 +2729,7 @@ font-weight: 700; } .p-datatable .p-datatable-tbody > tr:focus-visible { - outline: 0.15rem solid #ecfdf5; + outline: 0.15rem solid #a7f3d0; outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-highlight { @@ -2926,7 +2926,7 @@ .p-column-filter-menu-button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-column-filter-clear-button { @@ -2946,7 +2946,7 @@ .p-column-filter-clear-button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-column-filter-overlay { @@ -2980,7 +2980,7 @@ .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ecfdf5; + box-shadow: inset 0 0 0 0.15rem #a7f3d0; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { border-top: 1px solid #e5e7eb; @@ -3107,7 +3107,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-paginator { @@ -3286,7 +3286,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ecfdf5; + box-shadow: inset 0 0 0 0.15rem #a7f3d0; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3311,7 +3311,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -3405,7 +3405,7 @@ background: #f9fafb; } .p-treetable .p-sortable-column { - outline-color: #ecfdf5; + outline-color: #a7f3d0; } .p-treetable .p-sortable-column .p-sortable-column-icon { color: #374151; @@ -3463,7 +3463,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -3472,7 +3472,7 @@ color: #4b5563; } .p-treetable .p-treetable-tbody > tr:focus-visible { - outline: 0.15rem solid #ecfdf5; + outline: 0.15rem solid #a7f3d0; outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { @@ -3573,7 +3573,7 @@ .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.2rem #ecfdf5; + box-shadow: inset 0 0 0 0.2rem #a7f3d0; } .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { background: #f3f4f6; @@ -3663,7 +3663,7 @@ .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { color: #374151; @@ -3729,7 +3729,7 @@ .p-panel .p-panel-header .p-panel-header-icon:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-panel.p-panel-toggleable .p-panel-header { padding: 0.75rem 1.25rem; @@ -3763,7 +3763,7 @@ .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-splitter { @@ -3783,7 +3783,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; @@ -3813,7 +3813,7 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.2rem #ecfdf5; + box-shadow: inset 0 0 0 0.2rem #a7f3d0; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; @@ -3835,7 +3835,7 @@ .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.2rem #ecfdf5; + box-shadow: inset 0 0 0 0.2rem #a7f3d0; } .p-tabview .p-tabview-panels { background: #ffffff; @@ -3940,7 +3940,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -4045,7 +4045,7 @@ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-sidebar .p-sidebar-header + .p-sidebar-content { padding-top: 0; @@ -4087,7 +4087,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-fileupload .p-fileupload-content { background: #ffffff; @@ -4151,7 +4151,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4270,7 +4270,7 @@ .p-dock .p-dock-item.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ecfdf5; + box-shadow: inset 0 0 0 0.15rem #a7f3d0; } .p-dock .p-dock-link { width: 4rem; @@ -4651,7 +4651,7 @@ .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-menubar .p-menubar-root-list { position: absolute; @@ -4744,7 +4744,7 @@ .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.2rem #ecfdf5; + box-shadow: inset 0 0 0 0.2rem #a7f3d0; } .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { background: #f3f4f6; @@ -4869,7 +4869,7 @@ .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-steps .p-steps-item.p-highlight .p-steps-number { background: #F0FDFA; @@ -4917,7 +4917,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.2rem #ecfdf5; + box-shadow: inset 0 0 0 0.2rem #a7f3d0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; @@ -5089,7 +5089,7 @@ .p-message .p-message-close:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-message.p-message-info { background: rgba(219, 234, 254, 0.7); @@ -5193,7 +5193,7 @@ .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-toast .p-toast-message.p-toast-message-info { background: rgba(219, 234, 254, 0.7); @@ -5340,7 +5340,7 @@ .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-galleria-mask { @@ -5488,7 +5488,7 @@ .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-chip .p-chip-remove-icon:focus { outline: 0 none; @@ -5506,7 +5506,7 @@ .p-inplace .p-inplace-display:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ecfdf5; + box-shadow: 0 0 0 0.2rem #a7f3d0; } .p-progressbar {