/* ============================================================ * components.css — UI component layer * * Built on the token layer in main.css (:root + [data-theme="dark"]). * Selector strategy: dark mode keys off [data-theme="dark"] applied * to by the pre-paint script in header.php. * * Conventions: * .ui-* component root * .ui-*__el BEM element * .ui-*--mod BEM modifier * * All components must work in both light and dark mode using * the semantic tokens. No hardcoded hex colors below. * ============================================================ */ /* ---------------------------------------------------------- * Buttons — .ui-btn * Replaces .btn-buy, .btn-more-new, .shop-widget-btn * Touch target: 44px min height (lg=52, sm=36) * ---------------------------------------------------------- */ .ui-btn { --_btn-bg: var(--bg-surface); --_btn-fg: var(--fg-default); --_btn-border: var(--border-strong); --_btn-hover-bg: var(--bg-muted); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); font-family: var(--pfamily); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--_btn-fg); background-color: var(--_btn-bg); border: 1px solid var(--_btn-border); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease; user-select: none; white-space: nowrap; } .ui-btn:hover, .ui-btn:focus-visible { background-color: var(--_btn-hover-bg); color: var(--_btn-fg); text-decoration: none; } .ui-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .ui-btn:active { transform: translateY(1px); } .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } .ui-btn i, .ui-btn svg { flex: 0 0 auto; font-size: 1em; } /* Modifiers */ .ui-btn--primary { --_btn-bg: var(--primary); --_btn-fg: var(--fg-on-primary); --_btn-border: var(--primary); --_btn-hover-bg: var(--primary-hover); } .ui-btn--primary:hover, .ui-btn--primary:focus-visible { color: var(--fg-on-primary); border-color: var(--primary-hover); } .ui-btn--ghost { --_btn-bg: transparent; --_btn-fg: var(--fg-default); --_btn-border: var(--border-default); --_btn-hover-bg: var(--bg-muted); } .ui-btn--danger { --_btn-bg: var(--status-danger); --_btn-fg: #ffffff; --_btn-border: var(--status-danger); --_btn-hover-bg: color-mix(in srgb, var(--status-danger) 85%, black); } .ui-btn--danger:hover, .ui-btn--danger:focus-visible { color: #ffffff; border-color: color-mix(in srgb, var(--status-danger) 85%, black); } .ui-btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); } .ui-btn--lg { min-height: 52px; padding: 0 var(--space-5); font-size: 16px; border-radius: var(--radius-md); } .ui-btn--block { display: flex; width: 100%; } /* ---------------------------------------------------------- * Cards — .ui-card * Replaces .account-card, .wallet-card variants. * ---------------------------------------------------------- */ .ui-card { display: flex; flex-direction: column; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .ui-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); color: var(--fg-default); font-weight: 600; font-size: 16px; } .ui-card__body { padding: var(--space-5); color: var(--fg-default); flex: 1 1 auto; } .ui-card__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-default); background-color: var(--bg-muted); color: var(--fg-muted); font-size: 14px; } @media (max-width: 575.98px) { .ui-card__header, .ui-card__body, .ui-card__footer { padding-left: var(--space-4); padding-right: var(--space-4); } } /* ---------------------------------------------------------- * Forms — .ui-field, .ui-input, .ui-select, .ui-label, .ui-help, .ui-error * ---------------------------------------------------------- */ .ui-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .ui-label { font-size: 14px; font-weight: 500; color: var(--fg-default); line-height: 1.3; } .ui-label .ui-label__required { color: var(--status-danger); margin-left: 2px; } .ui-input, .ui-select, .ui-field textarea { display: block; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font-family: var(--pfamily); font-size: 15px; line-height: 1.4; color: var(--fg-default); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; appearance: none; } .ui-field textarea { min-height: 96px; resize: vertical; } .ui-input::placeholder, .ui-field textarea::placeholder { color: var(--fg-subtle); } .ui-input:hover, .ui-select:hover, .ui-field textarea:hover { border-color: var(--border-strong); } .ui-input:focus, .ui-select:focus, .ui-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .ui-input:disabled, .ui-select:disabled, .ui-field textarea:disabled { background-color: var(--bg-muted); color: var(--fg-muted); cursor: not-allowed; } .ui-select { padding-right: var(--space-6); background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .ui-help { font-size: 13px; color: var(--fg-muted); line-height: 1.4; } .ui-error { font-size: 13px; color: var(--status-danger); line-height: 1.4; } .ui-field--invalid .ui-input, .ui-field--invalid .ui-select, .ui-field--invalid textarea { border-color: var(--status-danger); } .ui-field--invalid .ui-input:focus, .ui-field--invalid .ui-select:focus, .ui-field--invalid textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 18%, transparent); } /* ---------------------------------------------------------- * Tables — .ui-table * Zebra rows + mobile card-collapse via [data-label] below 576px. * ---------------------------------------------------------- */ .ui-table { width: 100%; border-collapse: collapse; background-color: var(--bg-surface); color: var(--fg-default); font-size: 14px; } .ui-table thead th { background-color: var(--bg-muted); color: var(--fg-muted); font-weight: 600; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .ui-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); vertical-align: middle; } .ui-table tbody tr:nth-child(even) td { background-color: color-mix(in srgb, var(--bg-muted) 50%, transparent); } .ui-table tbody tr:hover td { background-color: var(--bg-muted); } .ui-table--compact thead th, .ui-table--compact tbody td { padding: var(--space-2) var(--space-3); } @media (max-width: 575.98px) { .ui-table, .ui-table thead, .ui-table tbody, .ui-table tr, .ui-table td { display: block; width: 100%; } .ui-table thead { display: none; } .ui-table tbody tr { margin-bottom: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--bg-surface); overflow: hidden; } .ui-table tbody tr:nth-child(even) td, .ui-table tbody tr:hover td { background-color: transparent; } .ui-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); text-align: right; } .ui-table tbody td:last-child { border-bottom: 0; } .ui-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--fg-muted); text-align: left; flex: 0 0 auto; margin-right: var(--space-3); } } /* ---------------------------------------------------------- * Badges — .ui-badge * Replaces inline . * ---------------------------------------------------------- */ .ui-badge { --_badge-bg: var(--bg-muted); --_badge-fg: var(--fg-default); display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); min-height: 22px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--_badge-fg); background-color: var(--_badge-bg); border-radius: var(--radius-pill); white-space: nowrap; } .ui-badge--success { --_badge-bg: color-mix(in srgb, var(--status-success) 18%, transparent); --_badge-fg: var(--status-success); } .ui-badge--danger { --_badge-bg: color-mix(in srgb, var(--status-danger) 18%, transparent); --_badge-fg: var(--status-danger); } .ui-badge--warning { --_badge-bg: color-mix(in srgb, var(--status-warning) 22%, transparent); --_badge-fg: color-mix(in srgb, var(--status-warning) 70%, black); } [data-theme="dark"] .ui-badge--warning { --_badge-fg: var(--status-warning); } .ui-badge--info { --_badge-bg: color-mix(in srgb, var(--status-info) 18%, transparent); --_badge-fg: var(--status-info); } .ui-badge--neutral { --_badge-bg: var(--bg-muted); --_badge-fg: var(--fg-muted); } /* ---------------------------------------------------------- * Stats — .ui-stat * KPI tile: label + value + optional trend. * ---------------------------------------------------------- */ .ui-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .ui-stat__label { font-size: 13px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; } .ui-stat__value { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--fg-default); word-break: break-word; } .ui-stat__trend { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: 13px; font-weight: 600; color: var(--fg-muted); } .ui-stat__trend--up { color: var(--status-success); } .ui-stat__trend--down { color: var(--status-danger); } .ui-stat--accent { border-color: var(--primary); background: linear-gradient(135deg, var(--primary-soft), transparent); } /* ---------------------------------------------------------- * Empty state — .ui-empty * ---------------------------------------------------------- */ .ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-7) var(--space-4); color: var(--fg-muted); } .ui-empty__icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; border-radius: 50%; background-color: var(--bg-muted); color: var(--fg-subtle); } .ui-empty__title { font-size: 18px; font-weight: 600; color: var(--fg-default); margin: 0; } .ui-empty__body { font-size: 14px; color: var(--fg-muted); max-width: 360px; line-height: 1.5; margin: 0; } .ui-empty__cta { margin-top: var(--space-2); } /* ---------------------------------------------------------- * Pagination — .ui-pagination * ---------------------------------------------------------- */ .ui-pagination { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: var(--space-4) 0; list-style: none; } .ui-pagination li { margin: 0; } .ui-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0 var(--space-3); font-size: 14px; font-weight: 500; color: var(--fg-default); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .ui-pagination__link:hover, .ui-pagination__link:focus-visible { background-color: var(--bg-muted); border-color: var(--border-strong); color: var(--fg-default); text-decoration: none; } .ui-pagination__link--active, .ui-pagination__link[aria-current="page"] { background-color: var(--primary); border-color: var(--primary); color: var(--fg-on-primary); } .ui-pagination__link--active:hover, .ui-pagination__link[aria-current="page"]:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); color: var(--fg-on-primary); } .ui-pagination__link--disabled, .ui-pagination__link[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* ---------------------------------------------------------- * Sidenav — .ui-sidenav * Vertical list, active state via --primary tint. * ---------------------------------------------------------- */ .ui-sidenav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); margin: 0; list-style: none; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); } .ui-sidenav li { margin: 0; } .ui-sidenav__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 44px; font-size: 14px; font-weight: 500; color: var(--fg-default); background-color: transparent; border-radius: var(--radius-md); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .ui-sidenav__link i, .ui-sidenav__link svg { flex: 0 0 auto; width: 18px; text-align: center; color: var(--fg-muted); font-size: 16px; } .ui-sidenav__link:hover, .ui-sidenav__link:focus-visible { background-color: var(--bg-muted); color: var(--fg-default); text-decoration: none; } .ui-sidenav__link--active, .ui-sidenav__link[aria-current="page"] { background-color: var(--primary-soft); color: var(--primary); } .ui-sidenav__link--active i, .ui-sidenav__link--active svg, .ui-sidenav__link[aria-current="page"] i, .ui-sidenav__link[aria-current="page"] svg { color: var(--primary); } /* ---------------------------------------------------------- * OTP — .ui-otp * 6-digit input row for verify_2fa / verify_otp. * ---------------------------------------------------------- */ .ui-otp { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .ui-otp__digit { width: 48px; height: 56px; padding: 0; font-family: var(--pfamily); font-size: 24px; font-weight: 600; line-height: 1; text-align: center; color: var(--fg-default); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease; -moz-appearance: textfield; } .ui-otp__digit::-webkit-outer-spin-button, .ui-otp__digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ui-otp__digit:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .ui-otp__digit:disabled { background-color: var(--bg-muted); color: var(--fg-muted); } @media (max-width: 575.98px) { .ui-otp__digit { width: 40px; height: 48px; font-size: 20px; } } /* ---------------------------------------------------------- * Utilities * ---------------------------------------------------------- */ .ui-text-muted { color: var(--fg-muted) !important; } .ui-text-subtle { color: var(--fg-subtle) !important; }