/* ============================================================ SUITE CHROME - the design system all four CryptoPro apps share. Byte-identical in every repo: CryptoPro Suite docs/css, Charts public/css, Trader src/css, Training src/css, all served at /css/suite-chrome.css. Change it in Suite and copy it to the other three in the same change; a copy that drifts is a fork. Contract with each app: - picks the accent. Neutrals, type, radii and controls are the same in every app; only the accent says which app you are in. - is set ONLY when the user chose one. Without it the page follows the device setting. - Load this file before the app's own stylesheet, so an app rule can still override a shared one on the rare screen that needs it. ============================================================ */ /* ---- Fonts: IBM Plex, self-hosted, latin + latin-ext only ----------- The UI is EN/NL/FR/ES, so the other upstream subsets are dropped. Plex Sans is variable: one file per subset covers 400-700. IBM Plex is SIL OFL 1.1; see /fonts/LICENSE.txt. */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Tokens: dark (the default) ------------------------------------- Every text pairing below is at least 4.5:1, accents included, on bg, surface and surface-2. --app- is the accent for text, borders and indicators; --app--fill and -on are a filled button and the text on it. Charts' fill differs from its accent because #2962ff reads well under white text but is too dark as text on #0b0e14. */ :root { color-scheme: dark; --bg: #0b0e14; --surface: #111624; --surface-2: #1a2130; --border: #262e3e; --text: #e6e9f0; --muted: #9aa3b5; --hover: rgba(230, 233, 240, 0.06); --up: #3fb950; --down: #f85149; --warn: #d29922; --link: #6ea8ff; /* Donate link, Admin role and the paper-trading disclaimer, the same in every app. Same hue as Trader's accent, which is why it is its own token: what it marks is the suite's, not Trader's. */ --gold: #e0b45c; --app-suite: #4cc9a4; --app-suite-fill: #4cc9a4; --app-suite-on: #0b0e14; --app-charts: #6b9bff; --app-charts-fill: #2962ff; --app-charts-on: #ffffff; --app-trader: #e0b45c; --app-trader-fill: #e0b45c; --app-trader-on: #0b0e14; --app-training: #a3e635; --app-training-fill: #a3e635; --app-training-on: #0b0e14; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px; --control-h: 32px; --header-h: 52px; } /* ---- Tokens: light --------------------------------------------------- The same values twice: once for a user who chose light, once for a device set to light when the user has not chosen. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef1f7; --border: #d5dbe6; --text: #1b2330; --muted: #5b6675; --hover: rgba(27, 35, 48, 0.06); --up: #1a7f37; --down: #cf222e; --warn: #8a6100; --link: #1f5fd8; --gold: #8a5f00; --app-suite: #0b7a60; --app-suite-fill: #0b7a60; --app-suite-on: #ffffff; --app-charts: #1f4fd8; --app-charts-fill: #2962ff; --app-charts-on: #ffffff; --app-trader: #8a5f00; --app-trader-fill: #8a5f00; --app-trader-on: #ffffff; --app-training: #4a7a0a; --app-training-fill: #4a7a0a; --app-training-on: #ffffff; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef1f7; --border: #d5dbe6; --text: #1b2330; --muted: #5b6675; --hover: rgba(27, 35, 48, 0.06); --up: #1a7f37; --down: #cf222e; --warn: #8a6100; --link: #1f5fd8; --gold: #8a5f00; --app-suite: #0b7a60; --app-suite-fill: #0b7a60; --app-suite-on: #ffffff; --app-charts: #1f4fd8; --app-charts-fill: #2962ff; --app-charts-on: #ffffff; --app-trader: #8a5f00; --app-trader-fill: #8a5f00; --app-trader-on: #ffffff; --app-training: #4a7a0a; --app-training-fill: #4a7a0a; --app-training-on: #ffffff; } } /* ---- The current app's accent ---------------------------------------- */ :root[data-app="suite"] { --accent: var(--app-suite); --accent-fill: var(--app-suite-fill); --on-accent: var(--app-suite-on); } :root[data-app="charts"] { --accent: var(--app-charts); --accent-fill: var(--app-charts-fill); --on-accent: var(--app-charts-on); } :root[data-app="trader"] { --accent: var(--app-trader); --accent-fill: var(--app-trader-fill); --on-accent: var(--app-trader-on); } :root[data-app="training"] { --accent: var(--app-training); --accent-fill: var(--app-training-fill); --on-accent: var(--app-training-on); } /* ---- Base ------------------------------------------------------------ */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Header ----------------------------------------------------------- Height, surface and brand block only. Where the header sits (static, sticky, inside a flex column) and what controls it holds stay with each app, because a charting workspace and a course page need different things there. */ .cp-header { box-sizing: border-box; min-height: var(--header-h); display: flex; align-items: center; gap: 12px; /* Vertical padding matters only when a narrow screen wraps the controls. */ padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } /* "CryptoPro" stays the text colour in every app, so the brand is one thing; the app name carries the accent, so the app is recognisable at a glance. The mark is 36px in every app. */ .cp-brand { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 20px/1.2 var(--font-sans); color: var(--text); white-space: nowrap; text-decoration: none; } /* An app may make the wordmark its page's h1; it keeps the brand's type. */ .cp-brand h1 { margin: 0; font: inherit; } .cp-brand img { width: 36px; height: 36px; border-radius: 8px; flex: none; } .cp-brand-app { color: var(--accent); } /* ---- Icons ------------------------------------------------------------- Lucide, from /icons/cp-icons.svg (byte-identical in every app, like this file). Icons replace emoji everywhere: an emoji renders in each device's own style and ignores the theme. These are sized to the text and drawn in its colour, so they follow the theme and the accent of what holds them. Usage: An icon that carries meaning on its own gets role="img" and an aria-label instead of aria-hidden. */ .cp-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* A pseudo-element cannot the sprite, so where a stylesheet has to draw the Pro lock itself (::after on a locked tab) it paints currentColor through this mask: the same Lucide lock as the sprite's. */ :root { --cp-lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } /* ---- Controls ---------------------------------------------------------- */ .cp-btn, .cp-select { box-sizing: border-box; min-height: var(--control-h); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font: 600 13px/1 var(--font-sans); cursor: pointer; } .cp-btn:hover, .cp-select:hover { border-color: var(--accent); } .cp-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cp-btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); } .cp-btn--primary:hover { filter: brightness(1.1); } .cp-select { /* Its own width, so an app's form rule (select { width: 100% }) cannot stretch a header control across the bar. */ width: auto; padding: 0 8px; } /* Icon-only button: square, and named by its title or aria-label. */ .cp-btn--icon { width: var(--control-h); padding: 0; } /* The role pill beside the wordmark. Same colours in every app: a role is the account's, which is shared across the suite. */ .role-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); font: 700 11px/1.4 var(--font-sans); letter-spacing: 0.3px; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); } .role-badge.role-free { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); border-color: color-mix(in srgb, var(--muted) 30%, transparent); } .role-badge.role-pro { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); border-color: color-mix(in srgb, var(--up) 40%, transparent); } .role-badge.role-admin { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); } /* Touch screens get 44px targets; the header grows to hold them. A narrow window counts too: each app used to raise a hand-picked list of controls at its own breakpoint, and the ones left off stayed 32px beside them. */ @media (pointer: coarse), (max-width: 720px) { :root { --control-h: 44px; --header-h: 56px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }