/* Robinhood Chain theme for the classic skin. * * Palette from the official Blockscout instance config * (blockscout/frontend-configs configs/color-themes/robinhood.json): dark * mode background #101112, primary action/link #CCFF00 (hover #ADD907), * action text #1C180D, secondary text #878380; light mode background * #FFFFFF, text rgba(16,17,18,.8), secondary text #718096, link #1F3F60 * (hover #4299E1), primary button #1C180D with white text. * * Dark-mode deviations from the official palette, for WCAG AA contrast on * the page/card backgrounds: secondary text #9a958f (was #878380) and * muted text #8f8a86 (was #6f6b68) are brightened, and borders run at 14% * white instead of 10% for table/row separation. * Light-mode text/link/status tokens are similarly darkened where the * official values miss AA against white: secondary #5f6b7a, muted #667085, * hover/focus #2b6cb0, and danger #c53030. * * Loaded after style2.css and style2-overrides.css. Every rule is scoped * under .theme-robinhood (a class on ) so it also beats the * page-level *_styles.html.eex partials that are inlined later at * single-class specificity. * * Dark is the default. The header Theme toggle adds .theme-light to * (falling back to the OS preference until the user chooses), * which redefines only the variables below plus a few light-only rules * at the end of the file. SSR bytes never vary by scheme, so the edge * HTML cache stays scheme-agnostic. */ .theme-robinhood{ color-scheme:dark; --bg:#101112; --bg-card:#17181a; --bg-elevated:#1b1c1e; --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.15); --text:rgba(255,255,255,.86); --text-secondary:#9a958f; --text-muted:#8f8a86; --link:#ccff00; --link-hover:#add907; --primary:#ccff00; --on-primary:#1c180d; --primary-bg:rgba(204,255,0,.12); --success:#00c2a2; --success-bg:rgba(0,161,134,.15); --success-border:rgba(0,161,134,.3); --danger:#ff6b6b; --warning:#f8b600; --warning-bg:rgba(248,182,0,.15); --warning-border:rgba(248,182,0,.3); --surface-faint:rgba(255,255,255,.03); --surface-1:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.05); --surface-3:rgba(255,255,255,.06); --surface-4:rgba(255,255,255,.08); --surface-hover:rgba(255,255,255,.1); --surface-strong:rgba(255,255,255,.12); --switch-off:rgba(255,255,255,.15); --slider-knob:#878380; --focus:#7e9e07; --focus-ring:rgba(204,255,0,.15); --accent-bg:rgba(204,255,0,.08); --accent-bg-hover:rgba(204,255,0,.15); --shadow-card:0 0.5rem 1.2rem rgba(0,0,0,.4); --shadow-search:0 6px 18px rgba(0,0,0,.5); --hero-gradient:linear-gradient(135deg,#17181a 0%,#101112 100%); --placeholder-gradient:linear-gradient(135deg,#232426,#1b1c1e); } /* ---- Base chrome (style2.css hardcodes) ---- */ .theme-robinhood .header, .theme-robinhood .topbar, .theme-robinhood .header-main, .theme-robinhood .footer{ background:var(--bg); } .theme-robinhood .card{ box-shadow:var(--shadow-card); } .theme-robinhood .card-header{ background:var(--bg-card); } .theme-robinhood thead th, .theme-robinhood tbody tr:hover{ background:var(--surface-1); } .theme-robinhood .nav-link:hover{ background:var(--surface-3); color:var(--text); } .theme-robinhood .btn{ background:transparent; border-color:var(--border); } .theme-robinhood .btn:hover{ background:var(--surface-3); } .theme-robinhood .global-search{ background:var(--surface-3); } .theme-robinhood .global-search:focus-within{ background:var(--surface-4); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); } .theme-robinhood .network-badge{ background:var(--surface-3); } .theme-robinhood .tab{ background:var(--surface-3); } .theme-robinhood .tab:hover{ background:var(--surface-hover); color:var(--text); } .theme-robinhood .tab.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); } .theme-robinhood .notice{ background:var(--surface-2); } .theme-robinhood .help-icon{ background:transparent; border-color:var(--border); } .theme-robinhood .testnet-banner{ color:var(--warning); } /* Official wordmark ships as a fixed-size SVG (164x24). */ .theme-robinhood .logo-img{ display:block; height:24px; width:auto; } /* ---- Shared components (style2-overrides.css hardcodes) ---- */ .theme-robinhood .topbar-badge, .theme-robinhood .topbar-icon-btn{ background:transparent; border-color:var(--border); } .theme-robinhood .topbar-icon-btn:hover{ background:var(--surface-3); color:var(--text); } .theme-robinhood .topbar-search-input{ background:var(--surface-3); border-color:var(--border); color:var(--text); } .theme-robinhood .topbar-search-input:focus{ background:var(--surface-4); border-color:var(--focus); } .theme-robinhood .nav-menu-inner{ background:var(--bg-elevated); } .theme-robinhood .nav-menu-item:hover{ background:var(--surface-3); } .theme-robinhood .mobile-nav{ background:var(--bg); } .theme-robinhood .mobile-menu-btn:hover{ background:var(--surface-3); } .theme-robinhood .btn-outline{ background:transparent; } .theme-robinhood .btn-outline:hover{ background:var(--surface-3); } .theme-robinhood .method-pill{ background:var(--surface-3); border:1px solid var(--border); } .theme-robinhood .addr-icon, .theme-robinhood .token-icon, .theme-robinhood .token-avatar, .theme-robinhood .token-badge, .theme-robinhood .token-transfers-table .token-icon{ background:var(--surface-4); border-color:var(--border); } .theme-robinhood .token-icon-placeholder, .theme-robinhood .token-transfers-table .token-icon-placeholder{ background:var(--placeholder-gradient); } .theme-robinhood .switch-slider{ background:var(--switch-off); } .theme-robinhood .switch-slider:before{ background:var(--slider-knob); } .theme-robinhood .token-holdings-select, .theme-robinhood .txs-select{ background:var(--surface-3); border-color:var(--border); color:var(--text); } .theme-robinhood .token-holdings-select:hover{ background:var(--surface-hover); } .theme-robinhood .table-footer{ background:var(--bg-card); } .theme-robinhood .card-footer{ background:var(--bg-card); } .theme-robinhood .pagination, .theme-robinhood .pagination-classic .page-item.disabled .page-link{ background:transparent; } .theme-robinhood .page-link:hover{ background:var(--surface-3); } .theme-robinhood .page-item.disabled .page-link{ background:transparent; } /* ---- Page partials (inlined after this file; beaten by specificity) ---- */ /* Home hero + search */ .theme-robinhood .hero::before{ background:var(--hero-gradient); border-bottom:1px solid var(--border); } .theme-robinhood .hero-title, .theme-robinhood .stats-strip, .theme-robinhood .stats-strip .stat-value{ color:var(--text); } .theme-robinhood .hero-title span{ color:var(--text-secondary); } .theme-robinhood .stats-strip .stat-label{ color:var(--text-secondary); } .theme-robinhood .search-box{ background:var(--bg-elevated); border-color:var(--border); box-shadow:var(--shadow-search); } .theme-robinhood .search-input{ background:transparent; color:var(--text); } .theme-robinhood .search-input::placeholder{ color:var(--text-muted); } .theme-robinhood .search-btn{ background:var(--primary); color:var(--on-primary); } .theme-robinhood .search-btn:hover{ background:var(--link-hover); } .theme-robinhood .overview-icon, .theme-robinhood .block-icon, .theme-robinhood .tx-icon, .theme-robinhood .action-icon{ background:var(--surface-3); } .theme-robinhood .view-all-btn{ background:var(--surface-3); } .theme-robinhood .view-all-btn:hover{ background:var(--surface-hover); } .theme-robinhood .new-txs-banner{ background:var(--accent-bg); color:var(--link); } .theme-robinhood .new-txs-banner:hover{ background:var(--accent-bg-hover); } /* Detail pages (tx, block) */ .theme-robinhood .detail-row:hover{ background:var(--surface-faint); } .theme-robinhood .detail-label .help-icon{ background:transparent; } .theme-robinhood .gas-bar{ background:var(--surface-hover); } .theme-robinhood .confirmations-badge{ background:transparent; border-color:var(--border); } .theme-robinhood .inline-nav-btn, .theme-robinhood .block-nav-btn{ background:var(--surface-3); } .theme-robinhood .inline-nav-btn:hover, .theme-robinhood .block-nav-btn:hover{ background:var(--surface-strong); } /* Tx logs */ .theme-robinhood .topic-item{ background:var(--surface-2); border:1px solid var(--border); } .theme-robinhood .topic-index{ background:var(--surface-hover); } .theme-robinhood .data-box{ background:var(--surface-2); } /* List pages (blocks, block txs, tokens): light table chrome */ .theme-robinhood .card .card-header{ background:var(--bg-card); } .theme-robinhood .card th{ background:var(--surface-1); } .theme-robinhood .card tr:hover{ background:var(--surface-1); } .theme-robinhood .badge-secondary{ background:var(--surface-4); background-color:var(--surface-4); border-color:var(--border-strong); color:var(--text-secondary); } .theme-robinhood .badge-warning{ background:var(--warning-bg); background-color:var(--warning-bg); border-color:var(--warning-border); color:var(--warning); } .theme-robinhood .badge-success{ background:var(--success-bg); background-color:var(--success-bg); border-color:var(--success-border); color:var(--success); } /* Export page */ .theme-robinhood .tools-link:hover, .theme-robinhood .btn-link:hover{ background:var(--surface-3); } .theme-robinhood .tools-link.active{ background:var(--surface-hover); } .theme-robinhood .form-select, .theme-robinhood .form-input{ background:var(--surface-3); border-color:var(--border); color:var(--text); } .theme-robinhood .form-select option{ background:var(--bg-card); color:var(--text); } .theme-robinhood .captcha-box{ background:var(--surface-1); } .theme-robinhood .btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); } .theme-robinhood .btn-primary:hover{ background:var(--link-hover); border-color:var(--link-hover); color:var(--on-primary); } /* ---- Light scheme ---- * * Values from the `_light` half of robinhood.json; neutral page chrome * (page background, borders) mirrors the classic skin's light neutrals * so the two skins stay visually related. Status hues are darkened to * keep ~4.5:1 contrast on white. */ .theme-robinhood.theme-light{ color-scheme:light; --bg:#f8f9fa; --bg-card:#ffffff; --bg-elevated:#ffffff; --border:rgba(16,17,18,.12); --border-strong:rgba(16,17,18,.18); --text:rgba(16,17,18,.8); --text-secondary:#5f6b7a; --text-muted:#667085; --link:#1f3f60; --link-hover:#2b6cb0; --primary:#1c180d; --on-primary:#ffffff; --primary-bg:rgba(28,24,13,.08); --success:#00806b; --success-bg:rgba(0,128,107,.1); --success-border:rgba(0,128,107,.3); --danger:#c53030; --warning:#8a6d00; --warning-bg:rgba(248,182,0,.15); --warning-border:rgba(248,182,0,.4); --surface-faint:rgba(16,17,18,.02); --surface-1:rgba(16,17,18,.04); --surface-2:rgba(16,17,18,.05); --surface-3:rgba(16,17,18,.06); --surface-4:rgba(16,17,18,.08); --surface-hover:rgba(16,17,18,.1); --surface-strong:rgba(16,17,18,.12); --switch-off:rgba(16,17,18,.15); --slider-knob:#718096; --focus:#2b6cb0; --focus-ring:rgba(43,108,176,.25); --accent-bg:rgba(31,63,96,.06); --accent-bg-hover:rgba(31,63,96,.1); --shadow-card:0 0.5rem 1.2rem rgba(16,17,18,.08); --shadow-search:0 6px 18px rgba(16,17,18,.12); --hero-gradient:linear-gradient(135deg,#ffffff 0%,#f7f9fa 100%); --placeholder-gradient:linear-gradient(135deg,#f0f2f5,#e6eaef); } /* The wordmark SVG ships white-on-dark only; recolor it for light. */ .theme-robinhood.theme-light .logo-img{ filter:brightness(0); } @media (max-width: 980px){ /* On phones the home hero collapses into a white card (home_html/classic_styles.html.eex); keep it a themed card here. */ .theme-robinhood .hero-inner{ background:var(--bg-card); box-shadow:var(--shadow-card); } } @media (max-width: 768px){ .theme-robinhood .logo-img{ height:20px; } }