/* ============================================================================ * StyleSheet.css — CryptoPaymentGateway admin panel * * Purpose * ─────── * A thin, focused custom layer that sits on top of Basecoat UI v0.3.11. * Basecoat already ships a complete design system (cards, buttons, inputs, * badges, tables, dialogs) via its CDN build. This file only adds what * Basecoat doesn't cover: the application shell, dark-theme token overrides, * and a set of utility/component classes used by the HTML templates. * * Section map * ─────────── * .1 Web font import — Inter + JetBrains Mono via Google Fonts. * .2 Global typography — Font-family, font-feature-settings, smoothing. * .3 Dark-theme tokens — HSL variable overrides on html.dark. * .4 App shell layout — Fixed sidebar + sticky topbar + centred column. * .5 Sidebar internals — Brand strip, nav links, user footer (flat only). * .6 Page-level helpers — Page section, header, form grids, split layout, * stat grid, network tabs. * .7 Component styles — Action pills, JSON diff viewer, pagination bar, * empty state, sort links. * .8 Utility classes — Flexbox, text, spacing, overflow helpers that * replace every inline style in the templates. * .9 Sign-out button — Destructive-tone header button. * .10 Responsive breakpoints — Mobile sidebar drawer (< 768 px) and grid collapses. * .11 Component fine-tuning — Stat cards, kbd keys, component font overrides. * .12 Select / option fix — Dark-theme dropdown contrast. * .13 Deployment page — Progress bar, log console, stage timeline. * .14 Wallet management — Wallet Lists, Workers, status badges, dialogs. * ============================================================================ */ /* ============================================================================ .1 Inter (web font) Loaded once via Google Fonts. Weights 300–800. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@100&display=swap'); /* ============================================================================ .2 Global typography Basecoat already sets up a sans-serif stack; we override the family to put Inter first, then fall back to Basecoat's own list. ============================================================================ */ :root { --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Cascadia Mono', monospace; --layout-sidebar-width: 16rem; --layout-navbar-height: 3.75rem; --layout-content-max: 95rem; } html, body { font-family: var(--font-sans); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } code, pre, kbd, samp, .font-mono { font-family: var(--font-mono); font-size: 0.675rem; font-feature-settings: 'liga' 0; } /* ============================================================================ .3 Dark-theme tokens Basecoat reads the standard shadcn HSL CSS custom properties. When the element carries class="dark", these values override the defaults to render a high-contrast, low-noise dark interface. ============================================================================ */ html.dark { --background: 240 6% 7%; --foreground: 0 0% 96%; --card: 240 5% 10%; --card-foreground: 0 0% 96%; --popover: 240 5% 10%; --popover-foreground: 0 0% 96%; --primary: 0 0% 96%; --primary-foreground: 240 6% 10%; --secondary: 240 4% 16%; --secondary-foreground: 0 0% 96%; --muted: 240 4% 14%; --muted-foreground: 240 5% 65%; --accent: 240 4% 16%; --accent-foreground: 0 0% 96%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 98%; --success: 142 65% 48%; --success-foreground: 0 0% 98%; --warning: 38 92% 55%; --warning-foreground: 240 6% 10%; --info: 217 91% 65%; --info-foreground: 0 0% 98%; --ring: 240 5% 65%; --radius: 0.5rem; color-scheme: dark; } /* Page background never bleeds white during font swap. */ html.dark, html.dark body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* ============================================================================ .4 App shell — fixed sidebar + centred main column Sidebar is sticky on the left at full viewport height; main column flexes to fill the remaining space; an inner wrapper with max-width keeps the content centred on wide screens. ============================================================================ */ .app-shell { display: flex; flex-direction: row; min-height: 100dvh; width: 100%; background-color: hsl(var(--background)); } .app-sidebar { flex: 0 0 var(--layout-sidebar-width); width: var(--layout-sidebar-width); position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--spacing) * 2); background-color: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); z-index: 30; } .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; } .app-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; height: var(--layout-navbar-height); padding-inline: 1.5rem; background-color: hsl(var(--background) / 0.85); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid hsl(var(--border)); } .app-content { flex: 1 1 auto; padding: 1.75rem 1.5rem 2rem; } .app-content-inner { width: 100%; max-width: var(--layout-content-max); margin-inline: auto; } .app-footer { padding: 1rem 1.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); border-top: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } /* ============================================================================ .5 Sidebar internals — flat menu, no accordions ============================================================================ */ .sidebar-brand { display: flex; align-items: center; gap: 0.75rem; height: var(--layout-navbar-height); padding-inline: 1.125rem; border-bottom: 1px solid hsl(var(--border)); flex-shrink: 0; } .sidebar-brand-logo { width: 2.125rem; height: 2.125rem; display: grid; place-items: center; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; flex-shrink: 0; } .sidebar-brand-name { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); letter-spacing: -0.01em; line-height: 1.1; } .sidebar-brand-tag { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; } .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.875rem 0.625rem 1rem; display: flex; flex-direction: column; gap: 0.125rem; } .sidebar-section-label { font-size: 0.6875rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.625rem 0.75rem 0.25rem; } .sidebar-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) - 2px); font-size: 0.8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: color 120ms ease, background-color 120ms ease; } .sidebar-link [data-lucide], .sidebar-link svg { width: 1rem; height: 1rem; flex-shrink: 0; color: currentColor; } .sidebar-link:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .sidebar-link[aria-current="page"], .sidebar-link.is-active { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); font-weight: 600; } .sidebar-divider { height: 1px; background-color: hsl(var(--border)); margin: 0.5rem 0.5rem; border: 0; } .sidebar-footer { border-top: 1px solid hsl(var(--border)); padding: 0.75rem 0.875rem; display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } .sidebar-user-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 9999px; background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: 0.75rem; font-weight: 600; flex-shrink: 0; text-transform: uppercase; } .sidebar-user-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .sidebar-user-email { font-size: 0.75rem; font-weight: 500; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-role { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } /* ============================================================================ .6 Page-level helpers Used by page templates for layout, grids, and the network tab switcher. ============================================================================ */ /* --- Page section wrapper — vertical stack of cards --- */ .page-section { display: flex; flex-direction: column; gap: 1.25rem; } /* --- Page header: title + supporting text + optional right-aligned controls --- */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; } .page-header p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; } /* --- Two-column grid used by the Smart Contract / Network form --- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.125rem; } .form-grid > .col-span-2 { grid-column: 1 / -1; } /* --- Stat grid for the dashboard cards --- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } /* --- Network tabs (TRON / BSC switcher). Reuses Basecoat's tablist look. --- */ .network-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); } .network-tab { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.875rem; border-radius: calc(var(--radius) - 4px); font-size: 0.8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: color 120ms ease, background-color 120ms ease; } .network-tab [data-lucide] { width: 0.875rem; height: 0.875rem; } .network-tab:hover { color: hsl(var(--foreground)); } .network-tab.is-active { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; } /* ============================================================================ .7 Component styles Action pills, JSON diff viewer, pagination bar, empty state, sort links. ============================================================================ */ /* --- Compact action pill (used inside Audit Log rows) --- */ .action-pill { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.02em; background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--border)); } .action-pill[data-tone="success"] { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); } .action-pill[data-tone="destructive"] { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); } .action-pill[data-tone="warning"] { background-color: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); } .action-pill[data-tone="info"] { background-color: hsl(var(--info) / 0.12); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.3); } /* --- JSON diff blocks on the Audit Log detail row --- */ .diff-row td { background-color: hsl(var(--muted) / 0.4); } .diff-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; padding: 0.75rem 1rem; } .diff-block { border: 1px solid hsl(var(--border)); border-radius: 0.375rem; overflow: hidden; background-color: hsl(var(--background)); } .diff-block[data-tone="old"] { border-color: hsl(var(--destructive) / 0.3); } .diff-block[data-tone="new"] { border-color: hsl(var(--success) / 0.3); } .diff-label { display: block; padding: 0.4375rem 0.625rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid hsl(var(--border)); } .diff-block[data-tone="old"] .diff-label { background-color: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); } .diff-block[data-tone="new"] .diff-label { background-color: hsl(var(--success) / 0.08); color: hsl(var(--success)); } .diff-code { padding: 0.625rem 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; color: hsl(var(--foreground)); white-space: pre-wrap; word-break: break-word; max-height: 16rem; overflow: auto; direction: ltr; text-align: left; } /* ============================================================================ .9 Sign-out button Rendered in the top bar as a red, destructive-intent action. Styled separately from Basecoat's .btn classes so it doesn't inherit the primary accent colour. ============================================================================ */ /* --- Top-bar action group --- */ .topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* --- Sign-out button: red accent so the destructive intent is unmistakable --- */ .btn-sign-out { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0 0.875rem; height: 2.125rem; border-radius: var(--radius); border: 1px solid hsl(var(--destructive) / 0.4); background-color: hsl(var(--destructive) / 0.10); color: hsl(var(--destructive)); font-size: 0.8125rem; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; white-space: nowrap; } .btn-sign-out [data-lucide], .btn-sign-out svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .btn-sign-out:hover { background-color: hsl(var(--destructive) / 0.18); border-color: hsl(var(--destructive) / 0.6); } /* --- Compact pagination bar --- */ .pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 1rem; border-top: 1px solid hsl(var(--border)); font-size: 0.8125rem; color: hsl(var(--muted-foreground)); } .pagination-bar nav { display: inline-flex; gap: 0.25rem; } .pagination-bar a, .pagination-bar span[data-state] { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background-color: hsl(var(--background)); color: hsl(var(--foreground)); text-decoration: none; font-variant-numeric: tabular-nums; font-size: 0.8125rem; transition: background-color 100ms ease; } .pagination-bar a:hover { background-color: hsl(var(--accent)); } .pagination-bar span[data-state="active"] { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .pagination-bar span[data-state="disabled"] { opacity: 0.4; cursor: not-allowed; } /* * Disabled wallet-row checkboxes (zero balance — cannot be swept). * Applies visually distinct greyed-out treatment to make it clear the * box is not interactive, without affecting normal table checkboxes. */ input[type="checkbox"].wallet-row-chk:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(100%); } /* --- Inline form helper text --- */ .form-help { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; line-height: 1.5; } /* --- Empty-state container used inside table card bodies --- */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; text-align: center; } .empty-state [data-lucide] { width: 2rem; height: 2rem; color: hsl(var(--muted-foreground) / 0.7); } /* ============================================================================ .8 Utility classes Single-purpose classes that replace every inline style= attribute in the HTML templates. Grouped by concern: layout, text, spacing, etc. ============================================================================ */ /* --- Layout / flexbox helpers --- */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-center { align-items: center; } .flex-end { justify-content: flex-end; } .flex-between { justify-content: space-between; } .flex-1 { flex: 1 1 auto; min-width: 0; } .gap-xs { gap: 0.25rem; } .gap-sm { gap: 0.5rem; } .my-sm { margin-block: 0.5rem; } .gap-md { gap: 0.75rem; } .gap-lg { gap: 1rem; } .gap-xl { gap: 1.25rem; } /* --- Text helpers --- */ .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.8125rem; } .text-muted { color: hsl(var(--muted-foreground)); } .text-destructive { color: hsl(var(--destructive)); } .text-success { color: hsl(var(--success)); } .text-end { text-align: end; } .text-center { text-align: center; } .text-upper { text-transform: uppercase; letter-spacing: 0.05em; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .lh-tight { line-height: 1.2; } .tracking-tight { letter-spacing: -0.018em; } .no-wrap { white-space: nowrap; } .tabular-nums { font-variant-numeric: tabular-nums; } /* --- Overflow --- */ .overflow-x-auto { overflow-x: auto; } .overflow-hidden { overflow: hidden; } .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Spacing / sizing --- */ .mt-xs { margin-top: 0.125rem; } .mt-sm { margin-top: 0.25rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 1.25rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.75rem; } .p-0 { padding: 0; } .px-md { padding-inline: 0.75rem; } .py-sm { padding-block: 0.625rem; } .w-full { width: 100%; } .h-btn { height: 2.5rem; } .max-w-xs { max-width: 26rem; } .max-w-cell { max-width: 18rem; } /* --- Grid helpers --- */ .grid-2col { display: grid; grid-template-columns: 1fr 1fr; } .grid-full { grid-column: 1 / -1; } /* --- Card sub-status grid (used in dashboard network cards) --- */ .status-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .status-mini-cell { padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--muted) / 0.35); } .status-mini-label { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.05em; } .status-mini-value { margin-top: 0.25rem; } /* --- Card footer row (quick-link buttons) --- */ .btn, .toggle-title, .card > header h2 { text-transform: capitalize; } .card-footer-row { display: flex; gap: 0.5rem; padding-top: 0; } /* * Stat balance row — shown inside dashboard network stat cards when * wallet counts and total USDT are available. */ .stat-balance-row { margin-top: 0.5rem; } /* * Input icon wrapper — contains the leading icon and optional trailing toggle * button. min-width: 0 is critical: without it a flex/grid child will refuse * to shrink below its intrinsic content width, causing overflow. */ .input-icon-wrap { position: relative; display: flex; align-items: center; min-width: 0; } /* * Masked / encrypted-key input variant. * Applies text truncation so a long Fernet-encrypted string shown in the * placeholder does not stretch the card. Works alongside .input-with-icon-btn. */ .input-key-masked { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .input-icon { position: absolute; inset-inline-start: 0.625rem; width: 0.875rem; height: 0.875rem; color: hsl(var(--muted-foreground)); pointer-events: none; } .input-icon-sm { position: absolute; inset-inline-start: 0.625rem; width: 0.75rem; height: 0.75rem; color: hsl(var(--muted-foreground)); pointer-events: none; } .input-with-icon { padding-inline-start: 2rem; } .input-with-icon-btn { padding-inline: 2rem 2.5rem; } .input-toggle-btn { position: absolute; inset-inline-end: 0.25rem; } .input-otp { letter-spacing: 0.3em; font-size: 1rem; } /* --- Login page layout --- */ .login-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background-color: hsl(var(--background)); } .login-container { width: 100%; max-width: 26rem; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; } .login-brand-logo { width: 2.75rem; height: 2.75rem; font-size: 1rem; } .login-brand-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; } .login-brand-sub { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-alert { margin-bottom: 1.25rem; } html.dark .alert h2 { text-transform: capitalize; } /* * Dark-theme override for success alerts. */ html.dark .alert[data-tone="success"] { background-color: rgba(34, 197, 94, 0.10) !important; border: 1px solid hsl(142, 65%, 48%, 0.40) !important; color: hsl(142, 65%, 65%) !important; } html.dark .alert[data-tone="success"] [data-lucide], html.dark .alert[data-tone="success"] svg { color: hsl(142, 65%, 65%) !important; stroke: hsl(142, 65%, 65%) !important; } html.dark .alert[data-tone="success"] h2, html.dark .alert[data-tone="success"] section { color: hsl(142, 65%, 65%) !important; } /* * Dark-theme override for warning alerts. */ html.dark .alert[data-tone="warning"] { background-color: rgba(234, 179, 8, 0.10) !important; border: 1px solid hsl(var(--warning) / 0.40) !important; color: hsl(38, 92%, 65%) !important; } html.dark .alert[data-tone="warning"] [data-lucide], html.dark .alert[data-tone="warning"] svg { color: hsl(38, 92%, 65%) !important; stroke: hsl(38, 92%, 65%) !important; } html.dark .alert[data-tone="warning"] h2, html.dark .alert[data-tone="warning"] section { color: hsl(38, 92%, 65%) !important; } /* * Dark-theme override for destructive alerts. */ html.dark .alert-destructive, html.dark .alert.login-alert { background-color: rgba(220, 38, 38, 0.15) !important; border: 1px solid rgba(220, 38, 38, 0.55) !important; color: hsl(0, 86%, 72%) !important; } html.dark .alert-destructive [data-lucide], html.dark .alert-destructive svg, html.dark .alert.login-alert [data-lucide], html.dark .alert.login-alert svg { color: hsl(0, 86%, 72%) !important; stroke: hsl(0, 86%, 72%) !important; } html.dark .alert-destructive h2, html.dark .alert-destructive section, html.dark .alert.login-alert h2, html.dark .alert.login-alert section { color: hsl(0, 86%, 72%) !important; } /* * .login-submit — the "Continue" button on the login page. */ .login-submit { width: 100%; height: 2.5rem; font-weight: 600; margin-top: 0.25rem; background-color: #ffffff !important; color: #0a0a0a !important; border-color: #ffffff !important; } .login-submit:hover { background-color: #e8e8e8 !important; border-color: #e8e8e8 !important; color: #0a0a0a !important; } .login-submit:active { background-color: #d4d4d4 !important; border-color: #d4d4d4 !important; } .login-footer { margin-top: 1.25rem; text-align: center; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* --- Dynamic breadcrumb inside the topbar --- */ .topbar-breadcrumb { display: flex; align-items: center; min-width: 0; overflow: hidden; } .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; padding: 0; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); } .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.25rem; } .breadcrumb-link { color: hsl(var(--muted-foreground)); text-decoration: none; white-space: nowrap; transition: color 120ms ease; } .breadcrumb-link:hover { color: hsl(var(--foreground)); } .breadcrumb-muted { color: hsl(var(--muted-foreground)); white-space: nowrap; } .breadcrumb-current { color: hsl(var(--foreground)); font-weight: 500; white-space: nowrap; } .breadcrumb-separator { display: inline-flex; align-items: center; color: hsl(var(--muted-foreground)); opacity: 0.5; flex-shrink: 0; } .breadcrumb-separator svg { width: 0.875rem; height: 0.875rem; } .topbar-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; } /* --- Icon sizing inside badges and small spots --- */ .icon-xs { width: 0.75rem; height: 0.75rem; } .icon-sm { width: 0.875rem; height: 0.875rem; } .icon-md { width: 1rem; height: 1rem; } /* --- Diff viewer inline icon --- */ .diff-icon-inline { width: 0.75rem; height: 0.75rem; margin-inline-end: 0.25rem; } /* * Filter toolbar layout. * align-items: flex-end ensures every child aligns along the bottom of the * toolbar row so labelled and un-labelled items sit flush at the same baseline. */ .filter-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; padding: 0.875rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--card)); } .filter-field-wrap--search { flex: 1 1 14rem; min-width: 12rem; } .filter-input-wrap { position: relative; display: flex; align-items: center; } .filter-input { padding-inline-start: 1.75rem; height: 2.25rem; width: 100%; } .filter-select { height: 2.25rem; } .filter-field-wrap { display: flex; flex-direction: column; gap: 0.25rem; min-width: 9rem; } .filter-field-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin: 0; } .filter-field-label + select { width: 100%; } .filter-submit-btn { align-self: flex-end; } /* --- Audit log table cell styles --- */ .cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; } .cell-mono { font-family: var(--font-mono); font-size: 0.75rem; } .cell-entity-id { color: hsl(var(--muted-foreground)); margin-inline-start: 0.25rem; } /* --- Table column widths (used in dashboard + audit log) --- */ .col-w-3 { width: 3rem; } .col-w-9 { width: 9rem; } .col-w-10 { width: 10rem; } .col-w-12 { width: 12rem; } /* --- Dashboard card header layout --- */ .stat-card-header-inner { flex: 1; min-width: 0; } /* --- Lucide icon sizing defaults --- */ [data-lucide] { width: 1rem; height: 1rem; stroke-width: 2; display: inline-block; vertical-align: -0.125em; } /* --- Toggle (checkbox-based) component --- */ .toggle-wrap { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--card)); } .toggle-label { display: inline-flex; align-items: center; cursor: pointer; margin: 0; } .toggle-input { width: 2.5rem !important; height: 1.375rem !important; appearance: none; position: relative; cursor: pointer; background-color: hsl(var(--secondary)); border: 1px solid hsl(var(--border)) !important; border-radius: 9999px !important; transition: background-color 160ms ease; flex-shrink: 0; } .toggle-input::before { content: ''; position: absolute; top: 50%; inset-inline-start: 2px; width: 1rem; height: 1rem; transform: translateY(-50%); background-color: hsl(var(--foreground)); border-radius: 9999px; transition: inset-inline-start 160ms ease; } .toggle-input:checked { background-color: hsl(var(--success)) !important; border-color: hsl(var(--success)) !important; } .toggle-input:checked::before { inset-inline-start: calc(100% - 1.125rem); background-color: hsl(var(--success-foreground)); } .toggle-body { flex: 1 1 auto; min-width: 0; } .toggle-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); } /* --- Badge variants --- */ .badge-success { background-color: hsl(var(--success) / 0.14); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.35); } .badge-muted { color: hsl(var(--muted-foreground)); } .badge-network { min-width: 5rem; } /* --- Empty state text nodes --- */ .empty-state-title { font-size: 0.9375rem; font-weight: 600; } .empty-state-body { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); max-width: 28rem; } /* * Read-only input variant — used for fields that display database values * but must not be editable by the admin. Selection remains enabled so * operators can copy locked addresses and keys. */ .input-readonly { opacity: 0.55; cursor: text; background-color: hsl(var(--muted) / 0.5) !important; color: hsl(var(--muted-foreground)) !important; -webkit-user-select: text; user-select: text; } .input-readonly:focus { outline: none; box-shadow: none; } /* * Small "Read-only" badge inline with a form label. */ .readonly-badge { font-size: 0.625rem; padding: 0.125rem 0.375rem; margin-inline-start: 0.5rem; vertical-align: middle; } /* --- Make Basecoat's .input and .btn honour Inter explicitly --- */ .input, .textarea, .select, .btn, .badge { font-family: var(--font-sans); } /* --- Wallet address rows stay LTR even inside an RTL ancestor (defensive) --- */ .font-mono.ltr-text { direction: ltr; text-align: start; unicode-bidi: plaintext; } /* ============================================================================ .10 Responsive breakpoints Below 1024 px: layout grid collapses where needed. Below 768 px: the sidebar becomes an off-canvas drawer. ============================================================================ */ /* Small responsive collapses at 1024 px */ /* --- Burger button: hidden on desktop, revealed at the mobile breakpoint --- */ .sidebar-toggle-btn { display: none; } @media (max-width: 768px) { .sidebar-toggle-btn { display: inline-flex; } .app-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; transform: translateX(-100%); transition: transform 200ms ease; } .app-sidebar.is-open { transform: translateX(0); box-shadow: 4px 0 24px rgb(0 0 0 / 0.4); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background-color: rgb(0 0 0 / 0.5); z-index: 25; } .sidebar-backdrop.is-visible { display: block; } .app-content { padding: 1.25rem 1rem; } } /* ============================================================================ .11 Component fine-tuning Low-priority overrides for Basecoat defaults, stat card header layout, the code key badge, and font-family consistency. ============================================================================ */ /* --- Stat-card header layout used on the dashboard --- */ .stat-card header { display: flex; align-items: flex-start; gap: 0.75rem; } .stat-card header > [data-lucide] { width: 1.25rem; height: 1.25rem; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; } .stat-card .stat-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.05em; } .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; } /* --- Code badge for inline keys --- */ .kbd-key { display: inline-flex; align-items: center; padding: 0.125rem 0.4375rem; font-family: var(--font-mono); font-size: 0.75rem; background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 0.3125rem; color: hsl(var(--foreground)); } /* * Truncating modifier for .kbd-key when the content is a long string. */ .kbd-key--truncate { display: inline-block; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* --- Subtle sortable-column header link --- */ .sort-link { display: inline-flex; align-items: center; gap: 0.25rem; color: hsl(var(--muted-foreground)); font-weight: 600; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; transition: color 100ms ease; } .sort-link:hover { color: hsl(var(--foreground)); } .sort-link.is-active { color: hsl(var(--foreground)); } .sort-icon-inactive { opacity: 0.45; color: hsl(var(--muted-foreground)); } .form-field label { margin-bottom: 0.6875rem; text-transform: capitalize; } :is( :is(.form, .field) :is( input[type=text]:not(:is(.select [data-popover]>header input[role=combobox], .command>header input, .dialog>*>header input)), input[type=email], input[type=password], input[type=number], input[type=file], input[type=tel], input[type=url], input[type=search]:not(:is(.select [data-popover]>header input[role=combobox], .command>header input, .dialog>*>header input)), input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=time], textarea ), .input[type=text], .input[type=email], .input[type=password], .input[type=number], .input[type=file], .input[type=tel], .input[type=url], .input[type=search], .input[type=date], .input[type=datetime-local], .input[type=month], .input[type=week], .input[type=time], .textarea )::placeholder { color: hsl(var(--muted-foreground)); } /* --- Text selection inside editable form controls --- Basecoat sets display:flex on .input[...], which breaks native text highlighting in Chromium/Edge. ::selection colours use hsl() so they work with our theme tokens (Basecoat's var(--color-primary) expects oklch values and renders an invisible highlight with our overrides). */ :is( .input[type=text], .input[type=email], .input[type=password], .input[type=number], .input[type=tel], .input[type=url], .input[type=search], .input[type=date], .input[type=datetime-local], .input[type=month], .input[type=week], .input[type=time], .textarea, .filter-input ) { display: inline-block; -webkit-user-select: text; user-select: text; } :is( .input[type=text], .input[type=email], .input[type=password], .input[type=number], .input[type=tel], .input[type=url], .input[type=search], .input[type=date], .input[type=datetime-local], .input[type=month], .input[type=week], .input[type=time], .textarea, .filter-input )::selection { background-color: hsl(var(--primary) / 0.35); color: hsl(var(--foreground)); } /* ============================================================================ .12 Select / option contrast fix for dark theme Forces a dark background and light text on the dropdown widget. ============================================================================ */ html.dark select, html.dark .select { color-scheme: dark; background-color: hsl(var(--card)) !important; color: hsl(var(--foreground)) !important; text-transform: capitalize; } html.dark select option, html.dark .select option { background-color: hsl(240, 5%, 13%); color: hsl(var(--foreground)); } html.dark select option:checked, html.dark .select option:checked { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } /* ============================================================================ .13 Smart-Contract Deployment page Styles for the live-deployment panel: progress track/fill bar, the scrollable log console, the stage-timeline strip, and the result address display blocks. ============================================================================ */ /* * Progress track — the outer container that forms the grey rail. * The inner .deploy-fill div is animated by JavaScript (style.width). */ .deploy-track { background-color: hsl(var(--primary) / 0.2); position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: 9999px; } /* --- Progress fill — starts at 0% and advances on each stage SUCCESS event --- */ .deploy-fill { background-color: hsl(var(--primary)); height: 100%; width: 0%; transition: width 400ms ease; border-radius: 9999px; } /* --- State modifiers applied by JavaScript when deployment finishes or fails --- */ .deploy-fill.is-error { background-color: hsl(var(--destructive)); } .deploy-fill.is-done { background-color: hsl(var(--success)); } /* * Accordion wrapper for the deploy-log console. */ .deploy-log-accordion { margin-top: 1rem; } /* * Scrollable monospace log console shown inside the accordion section. */ .deploy-log { background-color: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0.875rem 1rem; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.65; max-height: 20rem; overflow-y: auto; color: hsl(var(--foreground)); } /* --- Log line colour variants --- */ .deploy-log .log-ok { color: hsl(var(--foreground)); } .deploy-log .log-pending { color: hsl(var(--foreground)); } .deploy-log .log-error { color: hsl(var(--destructive)); font-weight: 500; } .deploy-log .log-done { color: hsl(var(--foreground)); font-weight: 700; } /* * Stage-timeline strip — a vertical list of the four deployment stages. */ .stage-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } .stage-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); } .stage-item.is-pending { color: hsl(var(--warning)); } .stage-item.is-success { color: hsl(var(--success)); } .stage-item.is-failed { color: hsl(var(--destructive)); } .stage-item [data-lucide] { width: 1rem; height: 1rem; flex-shrink: 0; } /* * Result address display — shown after a successful deployment. */ .result-addr { font-family: var(--font-mono); font-size: 0.8125rem; word-break: break-all; padding: 0.375rem 0.625rem; background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); color: hsl(var(--foreground)); line-height: 1.5; } /* --- Result card — flex column layout revealed by JS on 'done' event --- */ .deploy-result-card { display: none; flex-direction: column; gap: 1rem; margin-top: 1.25rem; } /* * Success state for the Deploy button after a successful deployment. */ .btn-deploy-success { background-color: hsl(var(--success) / 0.15) !important; color: hsl(var(--success)) !important; border-color: hsl(var(--success) / 0.45) !important; opacity: 1 !important; cursor: default; } .btn-deploy-success [data-lucide], .btn-deploy-success svg { color: hsl(var(--success)) !important; stroke: hsl(var(--success)) !important; } /* --- Mainnet-danger badge used on the deployment page --- */ .badge-mainnet-danger { background-color: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.4); } /* * Checklist component — used on the pre-flight checklist card. */ .checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .checklist-item { display: flex; align-items: flex-start; gap: 0.75rem; } .checklist-body { flex: 1; min-width: 0; } .checklist-icon { flex-shrink: 0; margin-top: 0.0625rem; } .checklist-icon--ok { color: hsl(var(--success)); } .checklist-icon--fail { color: hsl(var(--destructive)); } .checklist-icon--warning { color: hsl(var(--warning)); } /* ============================================================================ .14 Wallet management All styles for the wallet table, status badges, sweep dialogs, worker progress bars, and the bulk-sweep summary boxes. ============================================================================ */ /* --- Wallet address cell: address + copy button on the same row --- */ .wallet-addr-cell { display: flex; align-items: center; gap: 0.375rem; min-width: 0; } .wallet-addr-cell .font-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; } /* --- Lifecycle / allocation status badges --- * .status-badge is the common wrapper. Modifier classes encode both * the status family (lifecycle / allocation) and the specific value. */ .status-badge { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } /* Lifecycle — Creation Requested */ .status-badge--lifecycle-creation-requested { background-color: hsl(var(--muted) / 0.5); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); } /* Lifecycle — Created */ .status-badge--lifecycle-created { background-color: hsl(var(--info) / 0.12); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.3); } /* Lifecycle — Awaiting Activation (TRON only) */ .status-badge--lifecycle-created-awaiting-activation { background-color: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); } /* Lifecycle — Activated */ .status-badge--lifecycle-activated { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); } /* Allocation — Available (unassigned pool) */ .status-badge--alloc-available { background-color: hsl(var(--success) / 0.10); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.25); } /* Allocation — Assigned (permanent customer binding) */ .status-badge--alloc-assigned { background-color: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.3); } /* Ledger — Deposit */ .status-badge--tx-deposit { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); } /* Ledger — Withdrawal */ .status-badge--tx-withdrawal { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); } .tx-hash-cell { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .text-success { color: hsl(var(--success)); } .text-destructive { color: hsl(var(--destructive)); } /* --- Worker progress bars (Wallet Workers page) --- */ .worker-progress-list { display: flex; flex-direction: column; gap: 1.25rem; } .worker-progress-item { padding: 0.875rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--muted) / 0.25); } .worker-progress-track { background-color: hsl(var(--primary) / 0.15); position: relative; height: 0.4375rem; width: 100%; overflow: hidden; border-radius: 9999px; } .worker-progress-fill { background-color: hsl(var(--primary)); height: 100%; width: 0%; transition: width 600ms ease; border-radius: 9999px; } .worker-progress-fill.is-done { background-color: hsl(var(--success)); } .worker-progress-fill.is-error { background-color: hsl(var(--destructive)); } /* --- Task status action-pill variants --- */ .action-pill--done { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); } .action-pill--failed { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); } .action-pill--processing { background-color: hsl(var(--info) / 0.12); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.3); } /* --- Dialog styles --- * Native element styling. Basecoat styles .dialog-panel / * .dialog-header etc., but does NOT style the element itself. */ dialog.dialog { background-color: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8); max-width: 32rem; width: 100%; margin: auto; max-height: calc(100dvh - 4rem); overflow-y: auto; } /* Wide variant used for the Bulk Sweep dialog */ dialog.dialog.dialog--wide, dialog.dialog .dialog-panel--wide { max-width: 44rem; } dialog.dialog::backdrop { background-color: hsl(var(--background) / 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* * Inner layout classes. * .dialog-panel kept as a passthrough so existing markup is not broken. */ .dialog-panel { display: flex; flex-direction: column; gap: 0; background-color: hsl(var(--background)); } .dialog-panel--wide { max-width: 44rem; } /* * Header: strict single-row flex layout. */ .dialog-header { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; gap: 1rem; margin-bottom: 1.5rem; } .dialog-close-btn { flex-shrink: 0; margin-top: -0.25rem; margin-right: -0.5rem; } .dialog-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; text-transform: capitalize; } .dialog-title [data-lucide] { width: 1rem; height: 1rem; flex-shrink: 0; } /* Body: vertically stacked form fields */ .dialog-body { display: flex; flex-direction: column; gap: 1.25rem; } /* * Footer: action buttons right-aligned, separated from the body by a * 1 px border and vertical padding. */ .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } /* Compact card used inside the single-sweep dialog to show wallet info */ .wallet-sweep-info { padding: 0.75rem 1rem; margin-bottom: 1rem; background-color: hsl(var(--muted) / 0.35); } .wallet-sweep-info hr { margin: 0.75rem 0; } /* * Destination address preview inside sweep dialogs. * Long TRON (T-prefix, 34 chars) and BSC (0x, 42 chars) addresses must * never be clipped — the admin must be able to read the full address for * verification before queuing a sweep. break-all forces the string to * wrap at any character boundary so it is always fully visible. */ .sweep-dest-address { word-break: break-all; overflow-wrap: break-word; white-space: normal; line-height: 1.5; margin: 0; min-height: 1.25rem; } /* --- Bulk sweep network summary boxes --- */ .bulk-sweep-network-box { padding: 0.875rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--muted) / 0.25); margin-bottom: 1rem; } /* --- Pagination size form --- */ .pagination-size-form { display: flex; align-items: center; gap: 0.5rem; } /* --- Spacing helpers used inside wallet templates --- */ .mb-sm { margin-bottom: 0.375rem; } .mt-sm { margin-top: 0.375rem; } /* --- Destination radio-button group (Bulk Sweep dialog) --- * Two pill-shaped radio options rendered side-by-side. * The checked pill gets a primary-tinted border + background so it * reads as a clear selection indicator without native radio circle. */ .radio-group { display: flex; flex-direction: row; gap: 0.5rem; flex-wrap: wrap; } .radio-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; transition: background-color 100ms ease, border-color 100ms ease; user-select: none; flex: 1; min-width: 7rem; } .radio-option:has(input[type="radio"]:checked) { background-color: hsl(var(--primary) / 0.08); border-color: hsl(var(--primary) / 0.55); } .radio-option:hover { background-color: hsl(var(--accent)); } .radio-option input[type="radio"] { accent-color: hsl(var(--primary)); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; } .radio-option-label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); } /* --- Destination address row inside the Bulk Sweep dialog --- * Provides a subtle inset background and border so the addresses are * visually separated per network without heavy visual noise. */ .bulk-dest-addr-row { padding: 0.5625rem 0.75rem; background-color: hsl(var(--muted) / 0.25); border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--border)); } /* --- Security page feedback area --- * Vertical spacing above inline success/error alerts on /Setting/Security. */ .security-feedback-area { margin-block-end: var(--space-md, 1rem); min-height: 0; } .security-feedback-area:empty { display: none; } /* --- Workers History tab section header --- */ .page-section-header { margin-block-end: var(--space-sm, 0.75rem); } .page-section-title { font-size: var(--text-lg, 1.125rem); font-weight: 600; color: hsl(var(--foreground)); } /* --- WebHook settings help panel --- */ .webhook-help p { line-height: 1.6; } .webhook-param-list { padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; } .webhook-param-list code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8125rem; } .webhook-code-sample { padding: 0.75rem 1rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / 0.45); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } /* --- Create Wallets fee estimate panel --- */ .create-fee-display { line-height: 1.55; } .create-fee-row + .create-fee-row { margin-top: 0.35rem; } .create-fee-loading { display: inline-flex; align-items: center; gap: 0.5rem; color: hsl(var(--foreground)); } .create-fee-spinner { box-sizing: border-box; display: inline-block; width: 0.875rem; height: 0.875rem; border: 2px solid hsl(var(--muted-foreground) / 0.35); border-top-color: hsl(var(--info)); border-radius: 50%; animation: create-fee-spin 0.7s linear infinite; flex-shrink: 0; } .sweep-mark-icon { color: hsl(var(--success)); stroke: hsl(var(--success)); } .alert[data-tone="info"] .create-fee-spinner { border-color: hsl(var(--info) / 0.28); border-top-color: hsl(var(--info)); } html.dark .create-fee-spinner { border-color: hsl(var(--muted-foreground) / 0.45); border-top-color: hsl(var(--info)); } @keyframes create-fee-spin { to { transform: rotate(360deg); } } .page-section-desc { margin-block-start: 0.25rem; }