/* U.CASH design tokens (generated; do not edit). One --uc-* var per intent; themed tokens auto-flip via light-dark() against the active color-scheme. Source: tokens/*.json (W3C DTCG). */ :root{ color-scheme: light dark; --uc-surface: light-dark(#ffffff, #0a0a0a); --uc-surface-2: light-dark(#f6f7f9, #141417); --uc-text: light-dark(#1a1a1a, #e6e8ec); --uc-text-dim: light-dark(#5b6470, #9aa3af); --uc-border: light-dark(rgba(0,0,0,.10), rgba(255,255,255,.10)); --uc-accent: light-dark(#a37a29, #cc9933); --uc-accent-contrast: light-dark(#ffffff, #1a1300); --uc-accent-hover: light-dark(#cc9933, #e2b719); --uc-accent-bg: light-dark(rgba(163,122,41,.12), rgba(204,153,51,.14)); --uc-accent-2: light-dark(#b38829, #e6b347); --uc-accent-deep: light-dark(#7a5e1f, #b38829); --uc-line-gold: light-dark(rgba(153,114,38,.55), rgba(204,153,51,.40)); --uc-panel-2: light-dark(rgba(0,0,0,.04), rgba(255,255,255,.06)); --uc-glow: 0 0 38px rgba(204,153,51,.20); --uc-success: light-dark(#1f7a4d, #3fa66a); --uc-danger: light-dark(#b44545, #d26565); --uc-success-contrast: light-dark(#ffffff, #1a1300); --uc-danger-contrast: light-dark(#ffffff, #1a1300); --uc-radius: 8px; --uc-banner-h: 34px; --uc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; } /* Ustrap = U.CASH design tokens + UI patterns, one link. Same build as /ds//. */ /* uc-alert. An inline callout for outcome/status messaging INSIDE content (the uc-banner is the site-wide top bar - different job). Consumes only --uc-*; semantic variants tint the BORDER and the text accent only, the fill stays --uc-surface-2 so body copy keeps contrast in both themes (the filled-accent text law governs solid fills, which alerts deliberately avoid). .uc-alert-dismiss is an optional closer the host wires (uc-dialog's closers do not auto-bind here); omit it for non-dismissable messages. role=alert only for time-sensitive failures. */ .uc-alert{display:flex;align-items:flex-start;gap:10px;box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid var(--uc-border);border-left-width:3px;border-radius:var(--uc-radius);background:var(--uc-surface-2);color:var(--uc-text);font:400 14px/1.5 var(--uc-font,system-ui,sans-serif)} .uc-alert--accent{border-left-color:var(--uc-accent)} .uc-alert--success{border-left-color:var(--uc-success)} .uc-alert--danger{border-left-color:var(--uc-danger)} .uc-alert--accent .uc-alert-title{color:var(--uc-accent)} .uc-alert--success .uc-alert-title{color:var(--uc-success)} .uc-alert--danger .uc-alert-title{color:var(--uc-danger)} .uc-alert-title{font:700 13px/1.4 var(--uc-font,system-ui,sans-serif);margin:0 0 2px;color:var(--uc-text)} .uc-alert-body{margin:0;color:var(--uc-text-dim)} .uc-alert-dismiss{margin-left:auto;flex:0 0 auto;padding:0 4px;border:0;background:none;color:var(--uc-text-dim);font:600 16px/1 var(--uc-font,system-ui,sans-serif);cursor:pointer} .uc-alert-dismiss:hover{color:var(--uc-text)} /* uc-badge. A status/indicator pill. Consumes only --uc-* (theme + brand aware). Default = subtle accent tint; .uc-badge--accent = solid accent; .uc-badge--success/--danger = status. LAW: solid fills pair their text with a *-contrast token (light-dark(#fff, #1a1300)) - NEVER a hardcoded color for both themes. White on deep fills (light theme), near-black on bright fills (dark theme). The var(..., #fff) fallback keeps mixed-version consumption (old tokens + this badge.css) rendering exactly as before the token existed. */ .uc-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font:700 10px/1 var(--uc-font,system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:var(--uc-accent-bg);color:var(--uc-accent);border:1px solid var(--uc-accent)} .uc-badge--accent{background:var(--uc-accent);color:var(--uc-accent-contrast);border-color:var(--uc-accent)} .uc-badge--success{background:var(--uc-success);color:var(--uc-success-contrast, #fff);border-color:var(--uc-success)} .uc-badge--danger{background:var(--uc-danger);color:var(--uc-danger-contrast, #fff);border-color:var(--uc-danger)} /* uc-banner: dismissible status banner. Consumes ONLY --uc-* tokens, so it themes (light-dark) and brands (brand layer) automatically. Dismiss: the inline script adds .uc-banner-off to and sets --uc-banner-h:0 (apps that offset fixed panels by the banner height collapse cleanly). */ .uc-banner{display:flex;align-items:center;gap:10px;box-sizing:border-box;height:var(--uc-banner-h,34px);padding:7px 16px;background:var(--uc-surface-2);color:var(--uc-text);border-bottom:1px solid var(--uc-border);font:500 12.5px/1.3 var(--uc-font, ui-sans-serif, system-ui, sans-serif)} html.uc-banner-off .uc-banner,.uc-banner.is-off{display:none} .uc-banner-msg{flex:1 1 auto;text-align:center;min-width:0} .uc-banner strong{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:4px;background:var(--uc-accent);color:var(--uc-accent-contrast);margin-right:4px} .uc-banner-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:5px;background:transparent;color:var(--uc-text);font-size:15px;line-height:1;cursor:pointer;padding:0;opacity:.65} .uc-banner-close:hover{opacity:1} /* uc-button. Consumes only --uc-* (theme + brand aware). Default = outline; .uc-button--accent = filled accent. Pair with --uc-accent/--uc-accent-contrast for branded buttons. Variants: --danger/--success filled status; --icon = square icon-only (REQUIRES aria-label, the visible text is the icon); sizes --sm/--lg; --block = full width. .is-loading pairs with a .uc-spinner inside and blocks pointer events while busy (host swaps icon<->spinner). */ .uc-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:9px 16px;border:1px solid var(--uc-border);border-radius:var(--uc-radius);background:transparent;color:var(--uc-text);font:600 14px/1 var(--uc-font,system-ui,sans-serif);cursor:pointer;text-decoration:none;transition:border-color .15s,opacity .15s} .uc-button:hover{border-color:var(--uc-text-dim)} .uc-button:active{opacity:.85} .uc-button:disabled{opacity:.5;cursor:not-allowed} .uc-button--accent{background:var(--uc-accent);color:var(--uc-accent-contrast);border-color:var(--uc-accent)} .uc-button--accent:hover{border-color:var(--uc-accent);opacity:.9} .uc-button--danger{background:var(--uc-danger);color:var(--uc-danger-contrast, #fff);border-color:var(--uc-danger)} .uc-button--danger:hover{border-color:var(--uc-danger);opacity:.9} .uc-button--success{background:var(--uc-success);color:var(--uc-success-contrast, #fff);border-color:var(--uc-success)} .uc-button--success:hover{border-color:var(--uc-success);opacity:.9} .uc-button--sm{padding:5px 10px;font-size:12px;gap:6px} .uc-button--lg{padding:12px 22px;font-size:16px} /* icon-only: square hit area, icon centered; the accessible name MUST come from aria-label (or title) because no text is rendered. SVG icons size to the button's font. */ .uc-button--icon{padding:9px;width:36px;flex:0 0 auto} .uc-button--icon.uc-button--sm{padding:5px;width:28px} .uc-button--icon.uc-button--lg{padding:12px;width:46px} .uc-button svg{width:16px;height:16px;flex:0 0 auto} .uc-button--sm svg{width:13px;height:13px} .uc-button--lg svg{width:20px;height:20px} /* loading: host swaps content to + sets aria-busy="true"; pointer-events:none stops double submits without disabling (keeps :disabled styling to the host). */ .uc-button.is-loading{pointer-events:none;opacity:.75} .uc-button .uc-spinner{font-size:14px} .uc-button--lg .uc-spinner{font-size:16px} .uc-button--block{display:flex;width:100%} /* uc-card. Consumes only --uc-* (theme + brand aware). A surface container with title + body. Simple use: .uc-card > .uc-card-title + .uc-card-body (padding lives on the card). Sectioned use: .uc-card.uc-card--flush (padding:0) > .uc-card-header / .uc-card-body / .uc-card-footer - headers/footers carry their own padding and hairline dividers, the body pads itself (18px) so sectioned and simple cards share one rhythm. */ .uc-card{box-sizing:border-box;background:var(--uc-surface-2);border:1px solid var(--uc-border);border-radius:var(--uc-radius);padding:18px;color:var(--uc-text)} .uc-card-title{font:700 16px/1.3 var(--uc-font,system-ui,sans-serif);margin:0 0 6px} .uc-card-body{font:400 14px/1.5 var(--uc-font,system-ui,sans-serif);color:var(--uc-text-dim);margin:0} .uc-card--flush{padding:0;overflow:hidden} .uc-card--flush .uc-card-title{margin:0} .uc-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--uc-border)} .uc-card-footer{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--uc-border)} .uc-card--flush .uc-card-body{padding:18px} /* console.css: the pay.u.cash CONSOLE shell chrome, extracted for the money-dapp family (operator 2026-09-11: every app gets the console look - sidebar/collapse/drawer). Source: /var/www/pay.u.cash/css/admin.css (byte-identical cdn uxc twin), extraction 2026-09-11. THE EXTRACTION LAW: every selector is copied VERBATIM from the source so future admin.css evolutions stay diffable; exactly THREE mechanical edits are applied: 1. ancestor rename: .uxc-main / .uxc-admin -> .uxc-dapp-console (the shell wrapper contains ONLY the sidebar + backdrop; app content NEVER sits inside it) 2. dark alias: .uxc-dark-mode -> html:is(.uxc-dark-mode,.dark) - the dapp html.light/html.dark THEME_INIT system drives both ustrap light-dark() tokens and the console vars with ONE class; pay can adopt later by adding .uxc-dark-mode 3. z-index rescale (pay 999995..10000002 -> 40..46): the dapp ULINK wallet drawer portals at z-60 and must overlay the shell Hard-excluded globals (collision set - must NEVER be extracted): .uxc-main * content-box, bare button/body font-family rules, global select option colors, page-content families. NOBODY edits admin.css here; re-extraction = rerun the extractor + re-apply edits. */ /* Console label typeface, scoped to the shell only (app content keeps Inter). Absolute chassis URLs (the uxc namespace owns the woff2 files). */ @font-face { font-family: "Uncheckout"; src: url("https://cdn.u.cash/uxc/media/fonts/regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Uncheckout"; src: url("https://cdn.u.cash/uxc/media/fonts/medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Uncheckout"; src: url("https://cdn.u.cash/uxc/media/fonts/bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } .uxc-sidebar { font-family: "Uncheckout", Inter, system-ui, sans-serif; } :root { --uxc-bg-primary: #ffffff; --uxc-bg-secondary: rgba(127, 127, 127, 0.06); --uxc-bg-tertiary: #f5f5f5; --uxc-text-primary: #1a1a1a; --uxc-text-secondary: #6b6b6b; --uxc-text-muted: #999999; --uxc-border-color: #b0b0b0; --uxc-accent: #a37a29; --uxc-accent-rgb: 163, 122, 41; --uxc-error: #ca3434; --uxc-success: #4caf50; --uxc-warning: #ffc107; --uxc-hover-bg: rgba(0, 0, 0, 0.05); --uxc-input-bg: #ffffff; --uxc-card-bg: #ffffff; --uxc-shadow: rgba(0, 0, 0, 0.1); } .uxc-nav i:has(svg):before, .uxc-nav i.uxc-icon-bar-chart:before, .uxc-nav i.uxc-icon-settings:before, .uxc-nav i.uxc-icon-user:before, .uxc-nav i.uxc-icon-calendar:before { content: none; } #uxc-theme-toggle i { display: inline-block; width: 16px; height: 16px; line-height: 16px; vertical-align: middle; } #uxc-theme-toggle .uxc-theme-sun, #uxc-theme-toggle .uxc-theme-moon, #uxc-theme-toggle .uxc-theme-auto { display: none; } #uxc-theme-toggle[data-uxc-theme="light"] .uxc-theme-sun, #uxc-theme-toggle[data-uxc-theme="dark"] .uxc-theme-moon, #uxc-theme-toggle[data-uxc-theme="system"] .uxc-theme-auto { display: block; } #uxc-theme-toggle .uxc-theme-label-light, #uxc-theme-toggle .uxc-theme-label-dark, #uxc-theme-toggle .uxc-theme-label-system { display: none !important; } #uxc-theme-toggle[data-uxc-theme="light"] .uxc-theme-label-light, #uxc-theme-toggle[data-uxc-theme="dark"] .uxc-theme-label-dark, #uxc-theme-toggle[data-uxc-theme="system"] .uxc-theme-label-system { display: inline !important; } .uxc-nav-subitem { display: flex; align-items: center; justify-content: flex-start; text-align: left; width: 100%; box-sizing: border-box; min-height: 26px; padding: 0 8px; font-size: 11.5px; color: var(--uxc-text-muted, #999); cursor: pointer; border-left: 2px solid transparent; } .uxc-nav-subitem::before { content: "›"; margin-right: 7px; color: inherit; font-size: 13px; line-height: 1; } .uxc-nav-subitem:hover::before, .uxc-nav-subitem.uxc-active::before { color: var(--uxc-accent); } .uxc-nav-subitem:hover { color: var(--uxc-accent); background: rgba(var(--uxc-accent-rgb), 0.05); } .uxc-nav-subitem.uxc-active { color: var(--uxc-accent); border-left-color: var(--uxc-accent); font-weight: 600; } .uxc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 160px; background: #ffffff; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); z-index: 40; display: flex; flex-direction: column; overflow: hidden; } .uxc-sidebar > div { padding: 0; margin: 0; } .uxc-sidebar .uxc-logo { display: block; max-height: 22px; margin: 10px 0 10px 10px; max-width: calc(100% - 30px); } .uxc-sidebar .uxc-logo-icon { display: none; margin: 0; height: 25px; max-height: 25px; } .uxc-sidebar .uxc-bottom { position: fixed; bottom: 0; left: 0; width: 160px; margin: 0; z-index: 2; } .uxc-nav > div { font-weight: 400; cursor: pointer; line-height: 24px; font-size: 12px; margin: 3px 3px; padding: 0 10px; color: var(--uxc-text-secondary); transition: background .15s ease, color .15s ease; display: flex; align-content: center; align-items: center; } .uxc-nav > div:not(.uxc-nav-group) { min-height: 32px; } .uxc-nav > .uxc-drawer-profile, .uxc-nav > .uxc-drawer-credit, .uxc-sidebar > .uxc-drawer-footer, .uxc-sidebar > .uxc-drawer-dashrow { display: none !important; } .uxc-nav > div:hover { background: rgba(0,0,0,0.05); color: var(--uxc-text-primary); } .uxc-nav > div.uxc-active { background: rgba(0,0,0,0.06); color: var(--uxc-text-primary); font-weight: 600; } html:is(.uxc-dark-mode,.dark) .uxc-nav > div { color: var(--uxc-text-secondary); } html:is(.uxc-dark-mode,.dark) .uxc-nav > div:hover { background: rgba(255,255,255,0.06); color: var(--uxc-text-primary); } html:is(.uxc-dark-mode,.dark) .uxc-nav > div.uxc-active { background: rgba(255,255,255,0.08); color: var(--uxc-text-primary); } .uxc-nav > div:active i { transform: scale(0.95); } .uxc-nav > div > span { color: #1a1a1a; } html:is(.uxc-dark-mode,.dark) .uxc-nav > div > span { color: #ffffff; } .uxc-nav-logout { margin-bottom: 8px; } .uxc-nav i { color: var(--uxc-text-secondary); display: inline-block; margin-top: 0; margin-right: 10px; font-size: 16px; line-height: 0; } .uxc-nav i.uxc-icon-dollar { margin-right: 12px; } .uxc-nav i svg { width: 16px; height: 16px; vertical-align: middle; } .uxc-nav i.uxc-icon-shopping-cart { margin-right: 12px; } .uxc-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; min-height: 42px; flex: 0 0 auto; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-sidebar > .uxc-sidebar-foot { flex: 0 0 auto; border-top: 1px solid var(--uxc-border-color, #e6e6e6); padding: 8px; } .uxc-sidebar-head > div:not(.uxc-nav-collapse):not(.uxc-nav-open-btn) { flex: 1; } .uxc-nav-collapse, .uxc-nav-open-btn { background: none; border: none; cursor: pointer; color: var(--uxc-text-muted, #999); padding: 5px; display: none; align-items: center; justify-content: center; border-radius: 0; transition: color 0.2s, background 0.2s; } .uxc-nav-collapse { display: flex; width: 100%; gap: 10px; justify-content: flex-start; padding: 3px; border-radius: 0; box-sizing: border-box; font-size: 14px; font-weight: 500; color: var(--uxc-text-secondary); overflow: hidden; } .uxc-nav-collapse-label { font-size: 14px; white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .uxc-nav-collapse-label .uxc-cl-expand { display: none; } .uxc-sidebar.uxc-collapsed .uxc-nav-collapse-label .uxc-cl-collapse { display: none; } .uxc-sidebar.uxc-collapsed .uxc-nav-collapse-label .uxc-cl-expand { display: inline; } .uxc-nav-collapse:hover, .uxc-nav-open-btn:hover { color: var(--uxc-text-primary); background: rgba(0,0,0,0.04); } .uxc-nav > #uxc-theme-toggle, .uxc-nav > .uxc-nav-logout { display: none !important; } .uxc-nav-collapse svg { transition: transform 0.25s ease; } .uxc-nav .uxc-nav-group { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; --uxc-grp: #6a6a6a; color: var(--uxc-text-primary); font-weight: 600; padding: 10px 14px 0; margin: 0; border-radius: 0; line-height: 7px; cursor: default; } .uxc-nav .uxc-nav-group:hover { background: transparent !important; color: var(--uxc-grp) !important; } html:is(.uxc-dark-mode,.dark) .uxc-nav .uxc-nav-group { --uxc-grp: #9a9a9a; color: var(--uxc-text-primary); } .uxc-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 0; scrollbar-width: thin; scrollbar-color: #999 transparent; } .uxc-nav::-webkit-scrollbar { width: 2px; } .uxc-nav::-webkit-scrollbar-button { display: none; } .uxc-nav::-webkit-scrollbar-track { background: transparent; } .uxc-nav::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; } .uxc-nav::-webkit-scrollbar-thumb:hover { background: #777; } html:is(.uxc-dark-mode,.dark) .uxc-nav { scrollbar-color: #3a3a3a transparent; } html:is(.uxc-dark-mode,.dark) .uxc-nav::-webkit-scrollbar-thumb { background: #3a3a3a; } html:is(.uxc-dark-mode,.dark) .uxc-nav::-webkit-scrollbar-thumb:hover { background: #555; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav { scrollbar-width: thin; scrollbar-color: #999 transparent; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav::-webkit-scrollbar { width: 2px; display: block; } .uxc-nav-group-items { max-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s ease; } .uxc-nav-group.uxc-open + .uxc-nav-group-items { max-height: 300px; opacity: 1; } .uxc-main.uxc-nav-collapsed .uxc-body {} .uxc-main:has(.uxc-sidebar.uxc-collapsed.uxc-peek) { --uxc-content-left: 172px; } .uxc-bottom { padding-top: 50px; } .uxc-top:empty, .uxc-bottom:empty { display: none !important; } html:is(.uxc-dark-mode,.dark) { --uxc-bg-primary: #1a1a1a; --uxc-bg-secondary: #242424; --uxc-bg-tertiary: #2e2e2e; --uxc-text-primary: #e4e4e4; --uxc-text-secondary: #b0b0b0; --uxc-text-muted: #8a8a8a; --uxc-border-color: #3d3d3d; --uxc-accent: #d4a84b; --uxc-accent-rgb: 212, 168, 75; --uxc-error: #e57373; --uxc-success: #66bb6a; --uxc-warning: #ffd54f; --uxc-hover-bg: #383838; --uxc-input-bg: #2a2a2a; --uxc-card-bg: #242424; --uxc-shadow: rgba(0, 0, 0, 0.3); } html:is(.uxc-dark-mode,.dark) .uxc-sidebar { background: #000000; border-right-color: var(--uxc-border-color); } html:is(.uxc-dark-mode,.dark) .uxc-nav > div { color: var(--uxc-text-secondary); border-color: var(--uxc-bg-secondary); } html:is(.uxc-dark-mode,.dark) .uxc-nav > div:hover { color: var(--uxc-text-primary); border-color: var(--uxc-bg-secondary); } html:is(.uxc-dark-mode,.dark) .uxc-nav > div.uxc-active { color: var(--uxc-text-primary); border-color: var(--uxc-bg-secondary); } html:is(.uxc-dark-mode,.dark) .uxc-bottom { border-top-color: var(--uxc-border-color); } .uxc-theme-toggle-top#uxc-theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 40; width: 20px !important; height: 20px !important; border: none !important; background: transparent !important; border-radius: 0; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .uxc-theme-toggle-top#uxc-theme-toggle i { display: flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; } .uxc-theme-toggle-top#uxc-theme-toggle i svg { width: 16px !important; height: 16px !important; } .uxc-nav > [data-nav-submenu].uxc-open { display: flex; } @media (min-width: 768px) { .uxc-sidebar.uxc-collapsed .uxc-nav > .uxc-nav-group { height: 1px; min-height: 1px; padding-top: 4px; padding-bottom: 4px; margin-top: 0; margin-bottom: 0; overflow: hidden; font-size: 0; color: transparent; justify-content: center; } .uxc-sidebar.uxc-collapsed .uxc-nav > .uxc-nav-group::after { content: ''; display: block; width: 20px; height: 1px; margin: 0 auto; background: var(--uxc-border-color, #e0e0e0); } .uxc-sidebar.uxc-collapsed .uxc-nav { scrollbar-width: none; } .uxc-sidebar.uxc-collapsed .uxc-nav::-webkit-scrollbar { display: none; } .uxc-sidebar.uxc-collapsed { width: 38px; overflow: visible; } .uxc-sidebar.uxc-collapsed .uxc-logo { display: none; } .uxc-sidebar.uxc-collapsed .uxc-logo-icon { display: block; margin: 0 auto; height: 30px; max-height: 30px; } .uxc-nav-collapse .uxc-expand-ic { display: none; } .uxc-sidebar.uxc-collapsed .uxc-nav-collapse .uxc-collapse-ic { display: none; } .uxc-sidebar.uxc-collapsed .uxc-nav-collapse .uxc-expand-ic { display: block; } .uxc-sidebar.uxc-collapsed .uxc-nav-collapse { justify-content: center; } .uxc-sidebar.uxc-collapsed .uxc-nav-collapse-label { display: none; } /* Collapsed label hide (admin.css 2379-2383; v38: missing from the v35 extraction - tile labels rendered clipped in the 38px rail). The peek family below restores them. */ .uxc-sidebar.uxc-collapsed .uxc-nav > div > span, .uxc-sidebar.uxc-collapsed .uxc-nav-group > span, .uxc-sidebar.uxc-collapsed .uxc-nav-group::before { display: none; } .uxc-sidebar.uxc-collapsed .uxc-nav > div { justify-content: center; margin: 3px; padding: 0; min-height: 32px; height: 32px; } .uxc-sidebar.uxc-collapsed .uxc-nav > div > i { margin: 0 auto; display: block; } .uxc-sidebar.uxc-collapsed .uxc-nav-group-items { max-height: 300px !important; opacity: 1 !important; overflow: visible; } .uxc-sidebar.uxc-collapsed .uxc-sidebar-head { overflow: hidden; } .uxc-sidebar.uxc-collapsed > div:not(.uxc-sidebar-foot) { padding-left: 0; } .uxc-sidebar.uxc-collapsed { transition: width .18s ease; } .uxc-sidebar.uxc-collapsed.uxc-peek { width: 160px; box-shadow: 2px 0 10px rgba(0,0,0,.18); z-index: 41; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div { width: auto; margin: 3px 3px; padding: 0 10px; min-height: 0; height: auto; justify-content: flex-start; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div:not(.uxc-nav-group) { min-height: 32px; } /* Peek label restore (admin.css 2416-2419; v38: the collapsed span-hide's counterpart). */ .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > span, .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-group > span { display: inline; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > [data-nav-submenu].uxc-open { display: flex !important; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > i { margin: 0 10px 0 0; display: inline-block; width: 16px; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > i.uxc-icon-dollar, .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > div > i.uxc-icon-shopping-cart { margin-right: 12px; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav > .uxc-nav-group { height: auto; min-height: 0; overflow: visible; margin: 0; font-size: 9px; color: var(--uxc-text-primary); padding: 10px 14px 0; justify-content: flex-start; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-group::after { display: none; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-logo { display: block; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-logo-icon { display: none; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-collapse-label { display: inline; } .uxc-sidebar.uxc-collapsed.uxc-peek .uxc-nav-collapse { justify-content: flex-start; padding: 3px; } .uxc-main.uxc-nav-collapsed { --uxc-content-left: 54px; } .uxc-sidebar.uxc-collapsed [data-nav-submenu] { display: none !important; } } /* Desktop hide for the mobile drawer chrome (admin.css 3655; v39: the extraction carried the mobile re-show rules but not this base, so the drawer close X rendered on desktop. TOP-LEVEL, outside every media query - a v38 attempt landed inside the max-767 block and inverted). */ .uxc-nav-action, .uxc-nav-backdrop, .uxc-nav-close { display: none; } /* Shell drawer geometry (v40): pay's nav panel sits at +112px under three stacked mobile panels (close 42 + dashrow 40 + search 30) and reserves 34px for a drawer footer - none of which this shell renders, which left a detached gap between the close header and the tiles. Seat the nav directly under the 42px close header, run it to the bottom edge, and right-align the X (pay's icon-close is margin-left:auto inside a richer header). */ @media (max-width: 767px) { .uxc-dapp-console .uxc-sidebar > div.uxc-nav { top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px) + 42px); bottom: 34px; /* the theme footer panel rides under the grid (pay drawer geometry) */ } .uxc-dapp-console .uxc-sidebar > .uxc-nav-close { justify-content: flex-end; padding-right: 12px; } } @media (max-width: 767px) { .uxc-sidebar { overflow: hidden !important; } .uxc-sidebar .uxc-nav { overflow-x: hidden; } .uxc-sidebar .uxc-nav > div:not(#uxc-theme-toggle) span { display: inline !important; } .uxc-sidebar .uxc-nav > div { justify-content: flex-start !important; } .uxc-sidebar .uxc-nav > div i { margin-right: 12px; } .uxc-nav-open-btn { display: flex !important; } .uxc-nav-collapse { display: none !important; } .uxc-sidebar-foot { display: none !important; } .uxc-sidebar .uxc-logo-icon { margin-left: auto; margin-right: auto; } .uxc-sidebar { background: #fff !important; border: none !important; z-index: 43 !important; } html:is(.uxc-dark-mode,.dark) .uxc-sidebar { background: #000 !important; } /* v51: pay's mobile top-bar .uxc-bottom rules (admin.css 2455 + 3513-3516) DELETED. In pay .uxc-bottom is an EMPTY spacer (admin_code.php 275) - the functional drawer footer is .uxc-drawer-footer. Here .uxc-bottom is the theme row, and its mobile geometry is owned solely by the v47 panel at the file end. The 3513 copy carried left:0/right:0 !important, which pinned the v47 panel to x=0 no matter what. */ .uxc-nav-open-btn { position: relative !important; flex: 0 0 auto !important; align-self: stretch !important; height: auto !important; width: 32px; display: flex !important; align-items: center; justify-content: center; border-radius: 0; } .uxc-nav-open-btn svg { width: 16px; height: 16px; } .uxc-sidebar, .uxc-sidebar > div { display: flex; align-items: center; justify-content: flex-start; } .uxc-sidebar { bottom: auto; right: 0 !important; left: 0 !important; height: 32px; width: auto; border: none !important; } .uxc-sidebar > div { padding: 10px !important; margin: 0; } .uxc-sidebar > div.uxc-nav { padding-left: 0 !important; padding-right: 55px !important; display: flex !important; justify-content: center !important; flex: 1; } .uxc-sidebar .uxc-logo { display: none; } .uxc-sidebar .uxc-logo-icon { display: block; height: 35px; max-height: 35px; } .uxc-sidebar { top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)) !important; } .uxc-dapp-console .uxc-sidebar { top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)) !important; } .uxc-sidebar > .uxc-sidebar-head { position: fixed !important; top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)) !important; left: 0; right: 0; width: 100%; height: 32px; overflow: visible !important; z-index: 42; align-items: stretch; padding: 0 !important; background: #ffffff; box-sizing: border-box; } .uxc-sidebar-head:not(.uxc-ready) { visibility: hidden; } html:is(.uxc-dark-mode,.dark) .uxc-sidebar-head { background: #000000; } .uxc-nav-open-btn { width: 48px !important; box-sizing: border-box; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-sidebar-head > div:first-child { flex: 0 0 auto !important; display: flex; align-items: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); padding: 0 6px 0 6px; } #uxc-mobile-header-slot { flex: 1 1 0%; min-width: 0; display: flex; align-items: stretch; padding: 0; color: #2b2b2b; } html:is(.uxc-dark-mode,.dark) #uxc-mobile-header-slot { color: #fff; } #uxc-mobile-header-slot .uxc-mobile-title { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; display: flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-sidebar-head > .uxc-mobile-action { flex: 0 0 auto !important; align-self: stretch !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: auto !important; min-height: 0 !important; line-height: 1 !important; padding: 0 !important; box-sizing: border-box; border: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; color: var(--uxc-text-muted, #999) !important; } .uxc-sidebar-head > .uxc-mobile-action svg, .uxc-sidebar-head > .uxc-mobile-action i { width: 16px; height: 16px; font-size: 16px; display: block; margin: 0 !important; padding: 0 !important; line-height: 1; opacity: 0.8; position: relative; top: -4px; } .uxc-sidebar-head > .uxc-mobile-action:hover { background: var(--uxc-hover-bg) !important; color: var(--uxc-text-primary) !important; } .uxc-sidebar-head > .uxc-mobile-action:hover svg, .uxc-sidebar-head > .uxc-mobile-action:hover i { opacity: 1; } .uxc-sidebar-head > .uxc-mobile-action[data-target="#uxc-cmd-search-trigger"] svg { position: relative !important; top: 0px !important; opacity: 1 !important; } .uxc-sidebar-head > .uxc-mobile-action[data-target="#uxc-cmd-search-trigger"] { color: var(--uxc-text-primary, #000000) !important; } .uxc-sidebar-head > .uxc-nav-open-btn { color: var(--uxc-text-primary, #000000) !important; } #uxc-appdrawer-host { --ad-mut: var(--uxc-text-primary, #000000); } .uxc-sidebar-head > .uxc-mobile-action[data-target="#uxc-download-transitions"] svg { position: relative !important; top: 0 !important; } .uxc-nav > div { border: none !important; width: 46px; height: 32px; border-radius: 0; } .uxc-nav > div i { text-indent: 0; margin: auto !important; font-size: 25px; } .uxc-nav > div span { display: none !important; } } @media (max-width: 767px) { .uxc-sidebar > div.uxc-nav { display: grid !important; grid-auto-rows: min-content; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; position: fixed; top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px) + 112px); right: 0; bottom: 34px; width: 321px; box-sizing: border-box; background: #ffffff; transform: translateX(100%); transition: transform 0.3s ease; z-index: 45; overflow-y: auto; padding: 12px 8px 0 !important; box-shadow: -4px 0 24px rgba(0,0,0,0.18); border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); } html:is(.uxc-dark-mode,.dark) .uxc-sidebar > div.uxc-nav { background: #000000; } /* Drawer-open transforms (admin.css 3675-3678; v37: this family was missing from the v35 extraction - the nav + close panels kept translateX(100%) so the drawer never visibly slid open. mobile-search + drawer-footer kept verbatim; no-ops in this shell.) */ body.uxc-nav-open .uxc-sidebar > div.uxc-nav, body.uxc-nav-open .uxc-sidebar > .uxc-nav-close, body.uxc-nav-open .uxc-sidebar > .uxc-mobile-search, body.uxc-nav-open .uxc-sidebar > .uxc-drawer-footer { transform: translateX(0); } .uxc-nav > .uxc-nav-group { grid-column: 1 / -1 !important; } .uxc-nav > [data-nav-submenu].uxc-open { display: grid !important; grid-column: 1 / -1 !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; align-content: start !important; align-self: start !important; border: 0 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; } .uxc-nav > [data-nav-submenu], .uxc-nav > [data-nav-submenu]:hover { background: transparent !important; } html:is(.uxc-dark-mode,.dark) .uxc-nav > [data-nav-submenu]:hover { background: transparent !important; } .uxc-nav-subitem { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100%; box-sizing: border-box; min-height: 36px; padding: 5px 8px; font-size: 12px; line-height: 1.2; color: inherit; background: transparent; border: 1px solid var(--uxc-border-color, #e6e6e6) !important; border-radius: 0 !important; } .uxc-nav-subitem::before { content: none !important; margin-right: 0 !important; } .uxc-nav-subitem:hover { background: transparent !important; color: var(--uxc-accent); } .uxc-nav-subitem.uxc-active { background: transparent !important; border-color: var(--uxc-text-muted, #999) !important; font-weight: 600; color: inherit; } html:is(.uxc-dark-mode,.dark) .uxc-nav-subitem { color: var(--uxc-text-secondary); border-color: var(--uxc-bg-secondary) !important; } html:is(.uxc-dark-mode,.dark) .uxc-nav-subitem:hover { color: var(--uxc-accent); } html:is(.uxc-dark-mode,.dark) .uxc-nav-subitem.uxc-active { border-color: var(--uxc-bg-secondary) !important; color: var(--uxc-text-primary); } .uxc-nav > div.uxc-open:not([data-nav-submenu]):not(.uxc-nav-group) { border-color: var(--uxc-accent) !important; } .uxc-nav > div.uxc-open:not([data-nav-submenu]):not(.uxc-nav-group) > span, .uxc-nav > div.uxc-open:not([data-nav-submenu]):not(.uxc-nav-group) > i { color: var(--uxc-accent) !important; } .uxc-sidebar > .uxc-nav-close { position: fixed; top: calc(var(--uxc-beta-banner-h, 0px) + var(--uxc-mode-banner-h, 0px)); right: 0; width: 321px; height: 42px; display: flex !important; align-items: center; justify-content: flex-start; gap: 0; padding: 0 !important; box-sizing: border-box; color: var(--uxc-text-muted, #999); font-size: 15px; background: #ffffff; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); box-shadow: -4px 0 24px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform 0.3s ease; z-index: 46; } html:is(.uxc-dark-mode,.dark) .uxc-sidebar > .uxc-nav-close { background: #000000; } .uxc-sidebar > .uxc-drawer-dashrow { position: fixed; top: calc(var(--uxc-beta-banner-h, 0px) + 42px); right: 0; width: 321px; height: 40px; display: flex !important; box-sizing: border-box; padding: 0; margin: 0; background: #ffffff; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); transform: translateX(100%); transition: transform 0.3s ease; z-index: 46; } body.uxc-nav-open .uxc-sidebar > .uxc-drawer-dashrow { transform: translateX(0); } html:is(.uxc-dark-mode,.dark) .uxc-sidebar > .uxc-drawer-dashrow { background: #000000; } .uxc-drawer-dashcell { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px; margin: 0; border: 0; background: transparent; color: var(--uxc-text-primary, #1a1a1a); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; } .uxc-drawer-dashcell svg { flex: none; } .uxc-drawer-dashcell + .uxc-drawer-dashcell { border-left: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-drawer-dashcell:hover { background: var(--uxc-hover-bg, rgba(0,0,0,0.05)); } .uxc-sidebar > .uxc-nav-close > .uxc-icon-close { flex: 0 0 42px; align-self: stretch; margin-left: auto; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); cursor: pointer; } .uxc-sidebar > .uxc-nav-close > .uxc-drawer-profile { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; align-self: stretch; padding: 0 12px; border: 0; margin: 0; text-decoration: none; color: inherit; } .uxc-sidebar > .uxc-nav-close > .uxc-drawer-profile:hover, .uxc-sidebar > .uxc-nav-close > .uxc-icon-close:hover { background: var(--uxc-hover-bg, rgba(0,0,0,0.04)); } .uxc-nav > .uxc-nav-group { width: 100%; padding: 8px 2px 0 !important; margin: 4px 0 0 !important; font-size: 9px; line-height: 12px; height: auto !important; min-height: 0 !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--uxc-text-primary); } .uxc-nav .uxc-nav-group::after { display: none !important; } .uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) { width: auto !important; box-sizing: border-box; min-height: 40px !important; border: 1px solid var(--uxc-border-color, #e6e6e6) !important; border-radius: 0 !important; margin: 0 !important; padding: 6px 10px !important; display: flex; flex-direction: row; align-items: center; justify-content: space-between !important; gap: 8px; text-align: center; } .uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) > i { margin: 0 !important; width: 20px; height: 20px; flex: 0 0 20px; } .uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) > i svg { width: 20px; height: 20px; } .uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) span { display: block !important; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: right; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uxc-nav > div:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]):hover { background: var(--uxc-hover-bg, rgba(0,0,0,0.04)); } .uxc-nav > div.uxc-active:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) { background: rgba(0,0,0,0.06); border-color: var(--uxc-text-muted, #999); font-weight: 600; } .uxc-nav > div.uxc-active:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]):hover { background: rgba(0,0,0,0.08); } html:is(.uxc-dark-mode,.dark) .uxc-nav > div.uxc-active:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]):hover { background: rgba(255,255,255,0.12); } .uxc-nav > div.uxc-open:not(.uxc-nav-group):not(.uxc-nav-close):not(.uxc-drawer-profile):not(.uxc-drawer-footer):not(.uxc-drawer-credit):not([data-nav-submenu]) { border-color: var(--uxc-accent) !important; } .uxc-nav > #uxc-theme-toggle, .uxc-nav > .uxc-nav-logout { display: none !important; } .uxc-nav > #account { display: flex !important; } .uxc-sidebar > .uxc-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 44; } body.uxc-nav-open .uxc-sidebar > .uxc-nav-backdrop { display: block; } .uxc-sidebar-head > #uxc-appdrawer-host { flex: 0 0 auto !important; order: 5; } .uxc-sidebar-head > .uxc-nav-open-btn { order: 6; } body.uxc-nav-open #una-fab-root { display: none !important; } .uxc-nav > .uxc-drawer-profile { width: auto !important; display: flex !important; align-items: center; gap: 10px; grid-column: 1 / -1 !important; padding: 8px 10px !important; margin: 0 0 4px !important; border: 1px solid var(--uxc-border-color, #e6e6e6) !important; border-radius: 0 !important; } .uxc-drawer-profile .uxc-drawer-profile-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .uxc-nav > .uxc-drawer-credit { display: block !important; grid-column: 1 / -1 !important; flex-direction: column; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; line-height: normal !important; font-size: 13px !important; border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; background: transparent !important; cursor: pointer; overflow: visible; } .uxc-sidebar > .uxc-drawer-footer { position: fixed; right: 0; bottom: 0; width: 321px; height: 34px; display: flex !important; align-items: center; background: #ffffff; border-top: 1px solid var(--uxc-border-color, #e6e6e6); border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); box-shadow: -4px 0 24px rgba(0,0,0,0.18); padding: 0 !important; box-sizing: border-box; transform: translateX(100%); transition: transform 0.3s ease; z-index: 46; } html:is(.uxc-dark-mode,.dark) .uxc-sidebar > .uxc-drawer-footer { background: #000000; } .uxc-drawer-footer > .uxc-drawer-foot-item { flex: 1 1 0; justify-content: center; min-width: 0; font-size: 12px; font-weight: 600; } .uxc-drawer-foot-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; background: transparent; color: var(--uxc-text-primary, #333); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; } .uxc-drawer-foot-item:hover { background: var(--uxc-hover-bg, rgba(0,0,0,0.04)); } .uxc-drawer-foot-icon { flex: 0 0 44px; padding: 8px; } .uxc-drawer-foot-icon svg, .uxc-drawer-theme-ic svg { display: block; } .uxc-drawer-footer > .uxc-drawer-foot-item + .uxc-drawer-foot-item { border-left: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-drawer-footer .uxc-foot-k { color: var(--uxc-text-secondary, #6b6b6b); font-weight: 600; } .uxc-drawer-footer .uxc-theme-v { color: var(--uxc-text-primary, #1a1a1a); font-weight: 600; } .uxc-drawer-lang { cursor: pointer; min-width: 0; } .uxc-drawer-lang-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--uxc-text-primary, #1a1a1a); font: inherit; font-weight: 600; padding: 0 4px 0 0; margin: 0; height: 100%; cursor: pointer; min-width: 0; max-width: 90px; text-overflow: ellipsis; } .uxc-drawer-lang-select:focus { outline: none; } .uxc-drawer-lang-select option { background-color: #ffffff; color: #1a1a1a; } html:is(.uxc-dark-mode,.dark) .uxc-drawer-lang-select option { background-color: #2a2a2a; color: #eee; } } @media (max-width: 470px) { .uxc-nav > div { width: 40px; } } @media (max-width: 400px) { .uxc-nav > div { width: 40px; } } @media (max-width: 440px) { .uxc-sidebar > div { padding: 10px 0 10px 20px !important; } .uxc-sidebar .uxc-logo-icon { height: 30px; max-height: 30px; } .uxc-nav > div i { font-size: 18px !important; } .uxc-nav > div i svg { width: 24px; height: 24px; } .uxc-nav i.uxc-icon-shopping-cart svg { width: 20px; height: 20px; } .uxc-nav > div span { font-size: 12px; } } @media (max-width: 395px) { .uxc-nav > div { width: 38px; } } @media (max-width: 375px) { .uxc-nav > div { width: 33px; } .uxc-nav > div i { font-size: 20px; } } @media (max-width: 340px) { .uxc-nav > div { width: 30px; } } @media (max-width: 320px) { .uxc-nav > div { width: 28px; } .uxc-nav > div i { font-size: 18px; } } @media (max-width: 250px) { .uxc-nav > div { width: 22px; } .uxc-nav > div i { font-size: 14px !important; } } @media (max-width: 290px) { .uxc-nav > div { width: 22px; } .uxc-nav > div i { font-size: 14px !important; } .uxc-nav > div i svg { width: 16px; height: 16px; } .uxc-nav i.uxc-icon-shopping-cart svg { width: 14px; height: 14px; } } @media (max-width: 305px) { .uxc-nav > div { width: 26px; } .uxc-nav > div i { font-size: 16px !important; } .uxc-nav > div i svg { width: 18px; height: 18px; } .uxc-nav i.uxc-icon-shopping-cart svg { width: 16px; height: 16px; } } @media (max-width: 295px) { .uxc-nav > div { width: 23px; } } @media (max-width: 275px) { .uxc-nav > div { width: 21px; } } /* ==== dapp-shell additions (no pay counterpart) ==== */ /* Content offset: the sibling column next to the fixed sidebar. JS applies the same uxc-nav-collapsed/uxc-peek classes the sidebar gets, so the padding tracks the rail. */ .uxc-console-content { padding-left: var(--uxc-content-left, 172px); padding-right: 0; padding-top: 0; transition: padding-left .18s ease; } .uxc-console-content.uxc-nav-collapsed { --uxc-content-left: 54px; } .uxc-console-content.uxc-peek { --uxc-content-left: 172px; } @media (max-width: 767px) { .uxc-console-content { padding-left: 0; padding-top: 43px; } /* v45: 42px page-header bar + 1px border (the bar is the page header, not the sidebar head) */ } /* Wallet cell in the sidebar head (pay's head cell is the SSO avatar; dapps are wallet-first) - modeled on pay's .uxc-mobile-action cell pattern. */ .uxc-sidebar-head > .uxc-head-wallet { flex: 0 0 auto !important; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0 8px; order: 4; } @media (max-width: 767px) { .uxc-sidebar-head > .uxc-head-wallet { border-left: 1px solid var(--uxc-border-color, #e6e6e6); } } @media (min-width: 768px) { .uxc-dapp-console .uxc-mobile-title { display: none; } } /* ThemeSwitch chrome (the fleet header.css kit is gone on console dapps). */ .uxc-dapp-console .uxc-theme-toggle { background: none; border: none; cursor: pointer; color: var(--uxc-text-secondary); display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; line-height: 24px; } /* Appdrawer trigger cell (v37): appdrawer.js ADOPTS the shell's pre-rendered empty #uxc-appdrawer-host and mounts its shadow button in place. flex:0 keeps the head's > div:not(...) flex:1 stretch rule from eating it; the widget renders its own 40px button. */ .uxc-dapp-console .uxc-sidebar-head > #uxc-appdrawer-host { flex: 0 0 auto; display: inline-flex; align-items: center; } /* Page header (v42, pay .uxc-page-header idiom; operator: desktop = pay console structure): the SIDEBAR HEAD is logo-only (v38/v41 head-cell + collapsed-stack rules removed - the wallet CTA, appdrawer trigger and SSO avatar moved OUT of the sidebar), and the content column opens with a 42px header row: bordered title | right cluster (bordered cells: wallet CTA, avatar) | adopted appdrawer host - the pay dashboard-header cell look. */ .uxc-page-header { height: 42px; display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); margin-bottom: 14px; } .uxc-page-header .uxc-title { display: flex; align-items: center; padding: 0 14px; font-weight: 600; font-size: 16px; color: var(--uxc-text-primary, #1a1a1a); border-right: 1px solid var(--uxc-border-color, #e6e6e6); } /* Adopted appdrawer trigger pushes the right group (operator: apps grid FIRST, then the wallet + avatar cluster to its right; v44 - was the cluster-last v42 order). */ .uxc-page-header > #uxc-appdrawer-host { margin-left: auto; display: flex; align-items: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-page-header .uxc-page-header-right { display: flex; align-items: stretch; border-left: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-page-header .uxc-page-header-right > * { display: flex; align-items: center; padding: 0 10px; } .uxc-page-header .uxc-page-header-right > * + * { border-left: 1px solid var(--uxc-border-color, #e6e6e6); } /* Compact cells so the row holds 42px (the stock .btn-primary padding overflows it). */ .uxc-page-header .uxc-page-header-right .uxc-head-wallet .btn-wallet { padding: 4px 12px; font-size: 12.5px; } .uxc-page-header .uxc-page-header-right .uxc-account-avatar, .uxc-page-header .uxc-page-header-right #uxc-account-menu button { width: 26px; height: 26px; min-width: 26px; } /* Mobile brand + far-right burger cells (v45; hidden on desktop, the sidebar head owns the desktop brand). */ .uxc-page-header .uxc-mobile-brand { display: none; } .uxc-page-header > .uxc-nav-open-btn { display: none; } @media (max-width: 767px) { /* v45 (operator: ONE header row on mobile - no second bar): the page header becomes the fixed top bar [brand | title | apps | Connect | avatar | burger far right]; the sidebar-head is hidden and the sidebar exists only as the burger's menu drawer. */ .uxc-dapp-console .uxc-sidebar-head { display: none; } /* The aside still forms the (now empty) 32px top strip at z-43 and would swallow clicks on the z-42 page-header bar; the drawer's real surfaces are its fixed children - re-enable those, leave the empty strip pointer-transparent. */ .uxc-dapp-console .uxc-sidebar { pointer-events: none; } .uxc-dapp-console .uxc-sidebar > * { pointer-events: auto; } .uxc-page-header { position: fixed; top: 0; left: 0; right: 0; z-index: 42; height: 42px; margin: 0 0 0 0; background: #ffffff; } html:is(.uxc-dark-mode,.dark) .uxc-page-header { background: #000000; } .uxc-page-header .uxc-mobile-brand { display: flex; align-items: center; padding: 0 6px 0 10px; } .uxc-page-header .uxc-mobile-brand img { display: block; height: 22px; max-height: 22px; width: auto; } .uxc-page-header .uxc-title { font-size: 15px; } .uxc-page-header > .uxc-nav-open-btn { display: flex !important; align-items: center; justify-content: center; width: 42px; border-left: 1px solid var(--uxc-border-color, #e6e6e6); padding: 0; background: none; cursor: pointer; color: var(--uxc-text-muted, #999); } } @media (max-width: 767px) { .uxc-page-header { margin-bottom: 10px; } .uxc-page-header .uxc-title { font-size: 14px; padding: 0 10px; } } /* Shell fix: pay pins .uxc-sidebar .uxc-bottom position:fixed bottom:0, which overlays the .uxc-sidebar-foot collapse button (the theme label intercepts its clicks). In this shell the bottom bar rides the flex column instead - .uxc-nav is the flex:1 scroll region, so margin-top:auto seats the bar above the foot with zero overlap. */ .uxc-dapp-console .uxc-sidebar .uxc-bottom { position: static; width: auto; margin-top: auto; border-top: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-dapp-console .uxc-theme-toggle:hover { color: var(--uxc-text-primary); background: var(--uxc-hover-bg, rgba(0,0,0,.05)); } @media (max-width: 767px) { /* v47 (operator: the theme row lives IN the mobile drawer, pay drawer-footer behavior): a 34px sliding panel pinned bottom-right under the nav grid, off-canvas with the drawer. v51: left is EXPLICIT viewport-relative calc (belt-and-braces after deleting pay's left/right !important spacers) - no over-constrained solving, no solver dependence. v52: pay footer read - the toggle CENTERS in the bar (pay centers its foot-items in flex:1 cells) and carries pay's verbatim footer shadow so the bar separates from the drawer body instead of reading as a detached floating pill. v53: padding needs !important - pay's <=440px `.uxc-sidebar > div` compensation (10px 0 10px 20px) is !important and the footer IS a sidebar div child, so it shifted the bar 20px and squeezed the 34px content box. The toggle itself gets a footer-scoped 34px fit (its has-mode-label padding + 24px line-height = 36px, which overflowed the bar). */ .uxc-dapp-console .uxc-sidebar > .uxc-bottom { position: fixed; top: auto; left: calc(100vw - 321px); right: auto; bottom: 0; width: 321px; height: 34px; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 !important; background: #ffffff; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); border-top: 1px solid var(--uxc-border-color, #e6e6e6); box-shadow: -4px 0 24px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform 0.3s ease; z-index: 45; } .uxc-dapp-console .uxc-sidebar > .uxc-bottom .uxc-theme-toggle { height: 34px; line-height: 34px; padding: 0 12px; } html:is(.uxc-dark-mode,.dark) .uxc-dapp-console .uxc-sidebar > .uxc-bottom { background: #000000; } body.uxc-nav-open .uxc-dapp-console .uxc-sidebar > .uxc-bottom { transform: translateX(0); } } /* uc-controls: the form controls uc-input does not cover. Consumes only --uc-*. uc-select: native appearance KEPT ON PURPOSE - the OS arrow and the OS