/* Equyx — themes. * * Six looks on one set of variables. "terminal" is the Bloomberg-amber * console the app was built as and stays the default; the other five are * modern designs — two light, three dark — that change palette, type and * corner radius and nothing else. Every colour a component paints comes from * these variables, so a theme is a block of values, not a second stylesheet. * * The chosen theme is stamped on before the first paint by * config.js, and remembered per user by theme.js. */ html[data-theme="midnight"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #0b1020; --bg-2: #0e1430; --surface: #121a36; --surface-2: #172043; --surface-3: #1d2750; --border: #26325c; --border-strong: #3a4c8f; --panel: #0f1530; --panel-2: #0c1229; --panel-3: #080d1f; --chip: #172043; --hover: #1a2550; --active: #223169; --track: #1a2244; --text: #e8ecf8; --text-2: #b9c3e6; --muted: #8b98c9; --faint: #7885b3; --amber: #5b8cff; --amber-dim: #5780df; --amber-faint: #2c4283; --on-accent: #061024; --accent: var(--amber); --accent-soft: rgba(91,140,255,.16); --accent-line: rgba(91,140,255,.45); --warn: #f6b73c; --good: #34d399; --bad: #f87171; --cyan: #38bdf8; --violet: #a78bfa; --good-soft: rgba(52,211,153,.14); --bad-soft: rgba(248,113,113,.14); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 8px; --radius-sm: 6px; --radius-lg: 14px; } html[data-theme="graphite"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #111111; --bg-2: #151515; --surface: #1a1a1a; --surface-2: #202020; --surface-3: #262626; --border: #2b2b2b; --border-strong: #3d3d3d; --panel: #161616; --panel-2: #141414; --panel-3: #0e0e0e; --chip: #202020; --hover: #232323; --active: #2c2c2c; --track: #242424; --text: #f2f2f2; --text-2: #c9c9c9; --muted: #9c9c9c; --faint: #838383; --amber: #f5f5f5; --amber-dim: #c2c2c2; --amber-faint: #4d4d4d; --on-accent: #111111; --accent: var(--amber); --accent-soft: rgba(245,245,245,.12); --accent-line: rgba(245,245,245,.4); --warn: #f5b942; --good: #4ade80; --bad: #fb7185; --cyan: #67e8f9; --violet: #c4b5fd; --good-soft: rgba(74,222,128,.14); --bad-soft: rgba(251,113,133,.14); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; } html[data-theme="aurora"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #050a0a; --bg-2: #081010; --surface: #0b1616; --surface-2: #0f1d1d; --surface-3: #142424; --border: #173434; --border-strong: #215050; --panel: #0a1414; --panel-2: #081111; --panel-3: #050c0c; --chip: #0f1d1d; --hover: #12302a; --active: #163d33; --track: #123030; --text: #e4fff5; --text-2: #b6e8d6; --muted: #83bfa9; --faint: #6ea593; --amber: #2ee6a6; --amber-dim: #23b585; --amber-faint: #0f4d3a; --on-accent: #04120c; --accent: var(--amber); --accent-soft: rgba(46,230,166,.14); --accent-line: rgba(46,230,166,.45); --warn: #fbbf24; --good: #7cf5c4; --bad: #ff6b8b; --cyan: #67e8f9; --violet: #c084fc; --good-soft: rgba(124,245,196,.13); --bad-soft: rgba(255,107,139,.14); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; } html[data-theme="paper"] body.term { --brand-ink: #0034AA; /* light theme: the brand blue itself, measured ~10:1 here */ --bg: #f7f5ef; --bg-2: #f1eee6; --surface: #ffffff; --surface-2: #f4f1ea; --surface-3: #ece8df; --border: #d9d3c6; --border-strong: #b9b09d; --panel: #ffffff; --panel-2: #faf8f3; --panel-3: #f1eee6; --chip: #efece4; --hover: #efeadf; --active: #e6dfcf; --track: #e4dfd2; --text: #1c1a16; --text-2: #3d3932; --muted: #6b655a; --faint: #766f64; --amber: #1f4fb5; --amber-dim: #173f93; --amber-faint: #c7d3ee; --on-accent: #ffffff; --accent: var(--amber); --accent-soft: rgba(31,79,181,.10); --accent-line: rgba(31,79,181,.4); --warn: #966319; --good: #158054; --bad: #c73f3a; --good-ink: #116844; /* small text on a pale tint: 3.67:1 -> 5.0+ */ --cyan: #0e7490; --violet: #6d4fc4; --bad-ink: #a93631; /* error text: 3.89:1 -> 5.02:1 over this theme's banner */ --good-soft: rgba(23,138,90,.12); --bad-soft: rgba(199,63,58,.12); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 8px; --radius-sm: 6px; --radius-lg: 14px; } html[data-theme="ivory"] body.term { --brand-ink: #0034AA; /* light theme: the brand blue itself, measured ~10:1 here */ --bg: #fbf7f0; --bg-2: #f6f0e6; --surface: #fffdf9; --surface-2: #f8f3ea; --surface-3: #f0e9dc; --border: #e6dccb; --border-strong: #cdbfa7; --panel: #fffdf9; --panel-2: #fbf7f0; --panel-3: #f4eee3; --chip: #f1eadf; --hover: #f3ecdf; --active: #ece2d0; --track: #e9e1d2; --text: #2a2118; --text-2: #4a3f33; --muted: #7d6f5d; --faint: #7b6f65; --amber: #905f18; --amber-dim: #855614; --amber-faint: #f1e2c4; --on-accent: #ffffff; --accent: var(--amber); --accent-soft: rgba(144,95,24,.07); --accent-line: rgba(144,95,24,.45); --warn: #9c671a; --good: #2d8056; --bad: #c53030; --good-ink: #266c48; /* small text on a pale tint: 3.84:1 -> 5.0+ */ --cyan: #2b6cb0; --violet: #6b46c1; --bad-ink: #b12b2b; /* error text: 4.28:1 -> 5.04:1 over this theme's banner */ --good-soft: rgba(47,133,90,.12); --bad-soft: rgba(197,48,48,.12); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; } /* Light themes: the near-invisible white tints the dark console uses for zebra rows and hovers become dark tints, and the pulsing live dot stays legible. */ /* AN ALPHA ZEBRA STRIPE MAKES A PINNED COLUMN SEE-THROUGH. These rows carry `scr-row` AND `sig-row`, and the rank, ticker and Ask cells are `position: sticky`. A tint painted at 2.5% alpha leaves the cell almost entirely transparent, so every column sliding sideways underneath shows straight through the one column that is meant to hold still. The stripe has to be a SOLID colour a fraction off the ground, not a wash over nothing. */ html[data-theme="paper"] .scr-table tr.scr-row:nth-child(4n+1) td, html[data-theme="ivory"] .scr-table tr.scr-row:nth-child(4n+1) td { background: var(--bg-2); } html[data-theme="paper"] .sig-cnt, html[data-theme="ivory"] .sig-cnt { background: rgba(0,0,0,.07); } html[data-theme="paper"] .rf-fan line.spot, html[data-theme="ivory"] .rf-fan line.spot { stroke: rgba(0,0,0,.35); } html[data-theme="paper"] .sig-modal-back, html[data-theme="ivory"] .sig-modal-back { background: rgba(40,30,20,.45); } /* Modern themes soften the console's square corners and heavy uppercase. */ html:not([data-theme="terminal"]) body.term .hz-btn, html:not([data-theme="terminal"]) body.term .btn, html:not([data-theme="terminal"]) body.term .mini, html:not([data-theme="terminal"]) body.term .pill, html:not([data-theme="terminal"]) body.term .tabadd, html:not([data-theme="terminal"]) body.term .sig-q, html:not([data-theme="terminal"]) body.term .sig-num input, html:not([data-theme="terminal"]) body.term .conn-card, html:not([data-theme="terminal"]) body.term .ln-sec, html:not([data-theme="terminal"]) body.term .sig-acc, html:not([data-theme="terminal"]) body.term .sources, html:not([data-theme="terminal"]) body.term .foot-note { border-radius: var(--radius-sm); } html:not([data-theme="terminal"]) body.term .scr-table thead th { text-transform: none; letter-spacing: 0; font-size: 11px; } html:not([data-theme="terminal"]) body.term .ctab-kind, html:not([data-theme="terminal"]) body.term .hz-lab { letter-spacing: .04em; } /* ---- the switcher ---- */ .theme-wrap { position: relative; } .theme-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11px; padding: 4px 9px; cursor: pointer; border-radius: var(--radius-sm, 3px); background: transparent; color: var(--muted); border: 1px solid var(--border); white-space: nowrap; } .theme-btn:hover { color: var(--text); border-color: var(--amber, #ffa028); } .theme-btn .ico { width: 14px; height: 14px; } .theme-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 300px; background: var(--panel, #0d0b08); border: 1px solid var(--border-strong, #3a3020); border-radius: var(--radius-sm, 3px); box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 8px; } .theme-head { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 2px 6px 8px; display: flex; align-items: center; gap: 8px; } .theme-head .spacer { flex: 1; } .theme-opt { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; padding: 7px 8px; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm, 3px); color: var(--text); } .theme-opt:hover { background: var(--hover, #17130c); } .theme-opt.on { border-color: var(--amber, #ffa028); } .theme-swatch { width: 44px; height: 26px; border-radius: 4px; display: grid; grid-template-columns: 1fr 1fr 1fr; overflow: hidden; border: 1px solid rgba(0,0,0,.35); } .theme-swatch i { display: block; } .theme-opt b { display: block; font-size: 12px; } .theme-opt span { display: block; font-size: 10.5px; color: var(--muted); } .theme-opt .ico { width: 14px; height: 14px; color: var(--amber, #ffa028); } .theme-foot { font-size: 10px; color: var(--faint); padding: 8px 6px 2px; line-height: 1.5; } /* ---- icons and logos, everywhere ---- */ .ico { width: 1em; height: 1em; vertical-align: -.15em; flex: none; } .btn .ico, .mini .ico, .tabadd .ico, .cr-share .ico, .cr-brief .ico, .cr-map .ico, .askbtn .ico { margin-right: 5px; width: 13px; height: 13px; } .logo { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; background: #fff; flex: none; vertical-align: middle; } .logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .logo.mono { color: #fff; font-weight: 800; letter-spacing: .02em; } .c-stock .logo { margin-right: 7px; } .st-sym.with-logo { display: flex; align-items: center; } .sym-logo { width: 34px; height: 34px; margin-right: 10px; border-radius: 8px; } .wl-sym .logo { margin-right: 7px; } .qhit .logo { margin-right: 8px; width: 20px; height: 20px; } /* ------------------------------------------------------------------------ SIX MORE, AND THEY EARN THEIR COLOUR. The first six were sober by design. These are not, but a trading screen has a constraint a poster does not: green and red must stay unmistakably green and red at a glance, because they carry the sign of a number, and the accent must never be confusable with either. So every palette below moves the BACKGROUND and the ACCENT and leaves --good and --bad in their own lane - a theme that made a loss look teal would be a pretty way to misread a book. Each defines the whole variable set: a partial theme inherits the previous one's values and looks broken in exactly the places nobody tests. ------------------------------------------------------------------------ */ html[data-theme="neon"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #07030f; --bg-2: #0c0618; --surface: #130a24; --surface-2: #1a0f30; --surface-3: #23153f; --border: #2e1a50; --border-strong: #4a2a7d; --panel: #110820; --panel-2: #0d0619; --panel-3: #080310; --chip: #1a0f30; --hover: #241543; --active: #2f1c57; --track: #1d1136; --text: #f3e9ff; --text-2: #cbb6e8; --muted: #9a83bd; --faint: #8673a7; --amber: #ff2fb9; --amber-dim: #d63b9a; --amber-faint: #5c1043; --on-accent: #10000a; --accent: var(--amber); --accent-soft: rgba(255,47,185,.16); --accent-line: rgba(255,47,185,.5); --warn: #ffd166; --good: #2bf5a0; --bad: #ff4d6d; --cyan: #22d3ee; --violet: #c084fc; --good-soft: rgba(43,245,160,.14); --bad-soft: rgba(255,77,109,.15); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; } html[data-theme="sunset"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #160a14; --bg-2: #1d0e1a; --surface: #261324; --surface-2: #2f172c; --surface-3: #3a1e36; --border: #46243f; --border-strong: #6a3760; --panel: #210f1e; --panel-2: #1a0b17; --panel-3: #120710; --chip: #2f172c; --hover: #3a1f34; --active: #4a2842; --track: #331a2f; --text: #ffeee6; --text-2: #f0c9b6; --muted: #c39a8b; --faint: #a07f73; --amber: #ff9f43; --amber-dim: #e08430; --amber-faint: #6b3f12; --on-accent: #1b0d00; --accent: var(--amber); --accent-soft: rgba(255,159,67,.16); --accent-line: rgba(255,159,67,.48); --warn: #ffc857; --good: #4ade80; --bad: #ff5470; --cyan: #38bdf8; --violet: #c084fc; --good-soft: rgba(74,222,128,.14); --bad-soft: rgba(255,84,112,.15); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; } html[data-theme="ocean"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #041520; --bg-2: #061d2b; --surface: #092738; --surface-2: #0c3145; --surface-3: #113d55; --border: #164a66; --border-strong: #1f6b93; --panel: #072232; --panel-2: #051925; --panel-3: #03111a; --chip: #0c3145; --hover: #10405a; --active: #165470; --track: #0d3346; --text: #e3f6ff; --text-2: #b3dced; --muted: #7fb3c9; --faint: #6795ab; --amber: #00d4ff; --amber-dim: #00a8cc; --amber-faint: #05485c; --on-accent: #00161d; --accent: var(--amber); --accent-soft: rgba(0,212,255,.14); --accent-line: rgba(0,212,255,.45); --warn: #ffc857; --good: #3ddc97; --bad: #ff6b6b; --cyan: #67e8f9; --violet: #a78bfa; --good-soft: rgba(61,220,151,.14); --bad-soft: rgba(255,107,107,.14); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; } html[data-theme="forest"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #07120c; --bg-2: #0a1911; --surface: #0e2317; --surface-2: #122c1d; --surface-3: #183726; --border: #1e432c; --border-strong: #2c6440; --panel: #0c1e14; --panel-2: #09160f; --panel-3: #060f0a; --chip: #122c1d; --hover: #163524; --active: #1d452e; --track: #123020; --text: #e9ffef; --text-2: #bee5c9; --muted: #8bb99a; --faint: #729c81; --amber: #a3e635; --amber-dim: #84c018; --amber-faint: #3d5a10; --on-accent: #0a1400; --accent: var(--amber); --accent-soft: rgba(163,230,53,.15); --accent-line: rgba(163,230,53,.45); --warn: #fbbf24; --good: #34d399; --bad: #fb7185; --cyan: #38bdf8; --violet: #c084fc; --good-soft: rgba(52,211,153,.14); --bad-soft: rgba(251,113,133,.14); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 8px; --radius-sm: 6px; --radius-lg: 14px; } html[data-theme="ember"] body.term { --brand-ink: #708DCF; /* the brand blue is a light-background colour; measured 1.6-1.9:1 here */ --bg: #120606; --bg-2: #190909; --surface: #221010; --surface-2: #2b1414; --surface-3: #371a1a; --border: #432020; --border-strong: #6a3030; --panel: #1d0d0d; --panel-2: #160909; --panel-3: #0e0505; --chip: #2b1414; --hover: #351919; --active: #452020; --track: #2e1616; --text: #ffece9; --text-2: #f0c2ba; --muted: #c0938c; --faint: #9e7671; --amber: #ff4d2d; --amber-dim: #dd4e35; --amber-faint: #611a0c; --on-accent: #180200; --accent: var(--amber); --accent-soft: rgba(255,77,45,.15); --accent-line: rgba(255,77,45,.48); --warn: #ffb020; --good: #4ade80; --bad: #ff8fa3; --cyan: #38bdf8; --violet: #c084fc; --good-soft: rgba(74,222,128,.14); --bad-soft: rgba(255,143,163,.15); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 6px; --radius-sm: 4px; --radius-lg: 12px; } html[data-theme="solar"] body.term { --brand-ink: #0034AA; /* light theme: the brand blue itself, measured ~10:1 here */ --bg: #fffbf0; --bg-2: #fdf5e3; --surface: #ffffff; --surface-2: #fbf3df; --surface-3: #f6ead0; --border: #e6d7b4; --border-strong: #cdb887; --panel: #fffdf7; --panel-2: #fdf7e8; --panel-3: #f8f0dc; --chip: #fbf3df; --hover: #f6ead0; --active: #f0dfba; --track: #efe3c6; --text: #1f1a10; --text-2: #453a26; --muted: #7a6a4c; --faint: #7d7053; /* SOLAR'S ACCENT HAD TO GET DARKER TO BE READ, AND DARKER AMBER IS RED. #a25805 cleared 4.5:1 and then sat 68 away from `--bad`, under the 70 the palette suite demands - an accent a reader can mistake for a loss. This is the same hue (32 degrees, as the original #d97706), dark enough to read on both surfaces AND on its own selected tint, 86 from red and 123 from green. The tint had to be part of the search: an accent that clears the page and then fails on the row it highlights is half a fix. */ --amber: #8c6134; --amber-dim: #79532c; --amber-faint: #fde8c4; --on-accent: #ffffff; --accent: var(--amber); --accent-soft: rgba(140,97,52,.10); --accent-line: rgba(140,97,52,.42); --warn: #b45309; --good: #15803d; --bad: #b91c1c; --good-ink: #126d34; /* small text on a pale tint: 3.90:1 -> 5.0+ */ --cyan: #0e7490; --violet: #7c3aed; --good-soft: rgba(21,128,61,.12); --bad-soft: rgba(185,28,28,.12); --mono: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; } /* ---- DE-EMPHASISED TEXT STILL HAS TO BE READ ---- `--faint` failed WCAG AA for body text in seven of the thirteen themes, and the default was the worst of them: rgba(0,0,0,.42) on white is 3.04:1, which is what an audit measured on the sign-in page three times over. Every value here was computed by `probe/contrastfix.mjs` - the nearest colour on the same hue that reaches 4.5:1 against that theme's OWN background and its own card surface, whichever of the two is worse - not chosen by eye. Run that script after touching any of them. */ /* ---- ainvest: the research-product look, measured from ainvest.com ---- Every value here was read off the live site with getComputedStyle rather than eyeballed, so this is a match and not an impression: product page background rgb(255,255,255), card rgb(242,242,242), primary text rgb(24,24,27), muted rgba(0,0,0,.6), up rgb(0,163,109), down rgb(255,74,46), accent rgb(22,93,255), button radius 9999px, system sans, 16px base. The one thing deliberately NOT copied is the sign of a number: green stays green and red stays red, as in every other Equyx theme, because an accent that could be mistaken for either is a pretty way to misread a position. */ html[data-theme="ainvest"] body.term { --brand-ink: #0034AA; /* light theme: the brand blue itself, measured ~10:1 here */ --bg: #ffffff; --bg-2: #fafafa; --surface: #f2f2f2; --surface-2: #ededed; --surface-3: #e4e4e7; --border: #e4e4e7; --border-strong: #d4d4d8; --panel: #ffffff; --panel-2: #fafafa; --panel-3: #f4f4f5; --chip: #f2f2f2; --hover: #f4f4f5; --active: #e9e9ec; --track: #ededed; --text: #18181b; --text-2: #3f3f46; --muted: rgba(0,0,0,.6); --faint: rgba(0,0,0,.57); --amber: #1458f0; --amber-dim: #1250db; --amber-faint: #c7d7ff; --on-accent: #ffffff; --accent: var(--amber); --accent-soft: rgba(20,88,240,.10); --accent-line: rgba(20,88,240,.42); --warn: #a25905; --good: #007e54; --bad: #c93a24; --good-ink: #006c48; /* small text on a pale tint: 4.02:1 -> 5.0+ */ --cyan: #077894; --violet: #7c3aed; --bad-ink: #b93521; /* error text: 4.39:1 -> 5.02:1 over this theme's banner */ --good-soft: rgba(0,163,109,.12); --bad-soft: rgba(255,74,46,.12); --warn-soft: rgba(217,119,6,.12); --violet-soft: rgba(124,58,237,.12); --mono: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; } /* AInvest's buttons are full pills, not rounded rectangles - it is the single most recognisable thing about the surface, so it is stated once here rather than repeated on every component. */ html[data-theme="ainvest"] body.term .btn, html[data-theme="ainvest"] body.term .mini, html[data-theme="ainvest"] body.term .pill, html[data-theme="ainvest"] body.term .hz-btn, html[data-theme="ainvest"] body.term .qpill { border-radius: 9999px; } html[data-theme="ainvest"] body.term { font-size: 14px; letter-spacing: 0; } html[data-theme="ainvest"] body.term .scr-table tr.scr-row:nth-child(4n+1) td { background: var(--bg-2); } html[data-theme="ainvest"] body.term .sig-cnt { background: rgba(0,0,0,.06); } html[data-theme="ainvest"] body.term .rf-fan line.spot { stroke: rgba(0,0,0,.35); } html[data-theme="ainvest"] body.term .sig-modal-back { background: rgba(24,24,27,.45); }