...
* into a list/table area, or use | ...
* ============================================================ */
.aq-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:60px 24px;color:var(--aq-neutral-500);min-height:240px;
}
.aq-empty-ic{
width:72px;height:72px;border-radius:50%;background:var(--aq-primary-50);
color:var(--aq-primary-500);display:inline-flex;align-items:center;justify-content:center;
font-size:32px;margin-bottom:14px;
}
.aq-empty-h{font-size:16px;font-weight:700;color:var(--aq-neutral-900);margin-bottom:6px}
.aq-empty-d{font-size:13px;color:var(--aq-neutral-500);line-height:1.7;max-width:380px;margin:0 auto 16px}
.aq-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.aq-empty-row td{
text-align:center;padding:50px 20px;color:var(--aq-neutral-500);font-size:13.5px;
}
.aq-empty-row .aq-empty-ic-inline{
display:inline-flex;width:48px;height:48px;border-radius:50%;background:var(--aq-primary-50);
color:var(--aq-primary-500);align-items:center;justify-content:center;font-size:22px;margin-bottom:10px;
}
/* ============================================================
* BUTTON NORMALIZATION LAYER (Phase 4 UI audit)
* Forces consistent base behavior across all legacy button classes
* without overriding their purpose-specific colors/sizes.
*
* Migration target: use .aq-btn + .aq-btn-primary/secondary/ghost
* Legacy classes below are normalized to share focus/transition/disabled
* behavior but keep their visual identity.
* ============================================================ */
/* Universal button reset — applies to ALL button-like elements */
button,
.btn,
.btn-primary, .btn-secondary, .btn-light, .btn-submit, .btn-danger, .btn-nuclear,
.hero-btn, .hd-btn,
.wiz-btn, .wiz-btn-pri, .wiz-btn-sec,
.icon-btn, .gear-btn,
.uv-btn-primary, .uv-btn-secondary,
.app-suggest-btn, .role-cat-btn, .role-add-cta {
font-family: inherit;
cursor: pointer;
transition: background var(--aq-trans-fast), color var(--aq-trans-fast), border-color var(--aq-trans-fast), transform var(--aq-trans-fast), box-shadow var(--aq-trans-fast);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/* Universal focus ring — accessibility baseline */
button:focus-visible,
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-light:focus-visible, .btn-submit:focus-visible,
.hero-btn:focus-visible, .hd-btn:focus-visible,
.wiz-btn:focus-visible, .wiz-btn-pri:focus-visible, .wiz-btn-sec:focus-visible,
.icon-btn:focus-visible,
.uv-btn-primary:focus-visible {
outline: 2px solid var(--aq-primary);
outline-offset: 2px;
}
/* Universal disabled state */
button:disabled,
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled,
.btn-light:disabled, .btn-submit:disabled,
.hero-btn:disabled, .hd-btn:disabled,
.wiz-btn:disabled, .wiz-btn-pri:disabled, .wiz-btn-sec:disabled,
.icon-btn:disabled,
.uv-btn-primary:disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
/* Aliased duplicates — these are SEMANTICALLY identical to canonical DS classes
so we apply the same look. Existing specific overrides in each file still win. */
.btn-submit, .uv-btn-primary {
background: var(--aq-primary);
color: var(--aq-neutral-0);
}
.btn-submit:hover:not(:disabled), .uv-btn-primary:hover:not(:disabled) {
background: var(--aq-primary-700);
}
|