/* ============================================ Themes — alternative surface palettes WHAT A THEME IS ALLOWED TO CHANGE. A DARK theme moves the surfaces and their borders and nothing else -- the green ramp, the semantics and the text tones stay put, so it is the same product in a different room and cannot quietly break the contrast of a button or a badge. A LIGHT theme cannot honour that, and pretending otherwise would ship white text on a white page. Daylight therefore also flips the text tones, re-roles the green ramp (its "deep" fill becomes a pale tint and its "bright" text becomes the darkest step), darkens the semantics, and replaces the elevation scale -- the dark one leans on an inset white highlight, which is invisible on white. Every one of those values was measured against all four of its grounds before being written down; the worst text pairing in the theme is 4.71:1, over the 4.5:1 AA floor. THE PROBLEM THEY EXIST TO SOLVE. The default palette puts the page at 0.23% lightness, the sidebar at 0.91% and a card at 0.91% -- the sidebar and the cards are literally the same token, and a card sits 1.13:1 against the page when visible separation starts around 1.2:1. Nothing reads as a surface, so the whole app looks flat. Each theme below pulls those apart: navigation sinks BELOW the workspace, cards rise ABOVE it. HOW TO ADD ONE. Copy a block, give it a new id, then add the same id to THEMES in lib/theme.js with a name and a one-line note. Nothing else: the picker reads the swatch colours out of the CSS itself (see paletteOf() in pages/settings/appearance.js), so the swatch can never disagree with what the theme actually paints. WHY [data-theme=...] AND NOT :root[data-theme=...]. The picker renders each swatch by putting the id on a hidden probe element and reading its computed custom properties. That only works if the selector matches any element, not just the root. On it behaves identically, because custom properties inherit. "midnight" is the shipped default and deliberately has no block here -- it is base.css untouched, so choosing it is a true revert. ============================================ */ /* Midnight — the palette base.css already carries, restated under a name. Wearing it still means carrying no data-theme at all; this exists so the theme can be ASKED about. The picker reads a palette by putting its id on a hidden probe, and custom properties inherit -- so a probe with no attribute reported whatever the document was already wearing, and drew Midnight's swatch in Daylight's colours. */ [data-theme="midnight"] { --bg-secondary: #060807; --bg-primary: #141917; --bg-tertiary: #1B211E; --bg-hover: #232A26; --bg-nav: #141917; --bg-topbar: #060807; --border-color: #232B27; --border-dark: #3D4943; --bg-input: #060807; --bg-active: #1E2B26; --text-primary: #E9EDEB; --text-secondary: #A9B3AE; --text-muted: #97A19B; --green-deep: #1E2B26; --green-mid: #5C6E68; --green-accent: #7FA096; --green-bright: #C5D8D1; --success: #3FB950; --warning: #D29922; --danger: #F85149; --info: #58A6FF; --on-accent: #060807; --mint-glow: rgba(127, 160, 150, 0.20); --sage-glow: rgba(127, 160, 150, 0.38); --focus-ring: 0 0 0 2px rgba(127, 160, 150, 0.45); } /* --- Recessed nav ------------------------------------------------------- The conservative step, and the one to try first. The workspace comes off pure black, the chrome goes darker than the workspace, and cards land clearly above both. */ [data-theme="recessed"] { --bg-secondary: #101413; /* page / workspace */ --bg-primary: #191E1C; /* cards, panels, modals */ --bg-tertiary: #222825; /* list rows, wells */ --bg-hover: #2A312D; --bg-nav: #0A0D0C; /* sidebar */ --bg-topbar: #0A0D0C; --border-color: #262D2A; --border-dark: #2B322E; --bg-input: #141816; } /* --- Lifted ------------------------------------------------------------- The same move a step further: a soft charcoal workspace rather than a near-black one. Closest to "grey instead of black", while staying a dark theme that body text still reads on. */ [data-theme="lifted"] { --bg-secondary: #161B19; --bg-primary: #1F2523; --bg-tertiary: #283029; --bg-hover: #313A35; --bg-nav: #0D100F; --bg-topbar: #0D100F; --border-color: #2E3733; --border-dark: #333B37; --bg-input: #1A1F1D; } /* --- Slate -------------------------------------------------------------- Neutral rather than green-tinted. The default surfaces carry a little of the brand hue, which is what gives the app its slightly mossy cast; this drops it from the greys and leaves the green to the accents alone. */ [data-theme="slate"] { --bg-secondary: #0F1113; --bg-primary: #17191C; --bg-tertiary: #1F2226; --bg-hover: #262A2F; --bg-nav: #0A0B0D; --bg-topbar: #0A0B0D; --border-color: #24282D; --border-dark: #282C31; --bg-input: #121416; } /* --- Graphite ----------------------------------------------------------- The most separation of the four: the widest gaps between page, card and row, and the lightest borders. Pick this if the others still read flat. */ [data-theme="graphite"] { --bg-secondary: #14171A; --bg-primary: #1E2226; --bg-tertiary: #282D32; --bg-hover: #323840; --bg-nav: #0C0E10; --bg-topbar: #0C0E10; --border-color: #2E343A; --border-dark: #2F353B; --bg-input: #191C20; } /* --- Daylight ----------------------------------------------------------- The light one. Same structural idea as the dark themes -- nav recedes, cards rise -- which matters MORE here, not less: contrast ratios compress towards white, so surfaces that look adequately separated by number can still read as one flat sheet. Card-against-page is 1.137:1 and page- against-nav 1.124:1, both a little wider than Graphite manages at the dark end, which is what stops this becoming the same flatness in reverse. The green ramp swaps roles rather than values-in-kind: --green-deep is a fill and becomes a pale tint, --green-bright is the text that sits on that fill and becomes the darkest step. Every rule pairing the two keeps working, in both directions, without being touched. The semantics are darkened because the dark set is tuned for a near-black ground; #3FB950 on white is 2.2:1 and would be decorative rather than legible. */ [data-theme="daylight"] { /* surfaces */ --bg-secondary: #EEF1EF; /* page / workspace */ --bg-primary: #FFFFFF; /* cards, panels, modals */ --bg-tertiary: #E6EAE8; /* list rows, wells */ --bg-hover: #DDE4E0; --bg-nav: #DFE5E1; /* sidebar */ --bg-topbar: #DFE5E1; --bg-active: #D7E4DD; /* text -- worst of these is --text-muted at 4.71:1 on the nav */ --text-primary: #14181A; --text-secondary: #48534F; --text-muted: #59665F; /* borders. --border-dark carries control edges and clears 3:1 on a card */ --border-color: #D3DAD6; --border-dark: #C9D1CC; --border-on: color-mix(in srgb, var(--green-accent) 30%, var(--border-color)); /* the ramp, re-roled: deep is a fill, bright is the text on it */ --green-deep: #D7E4DD; --green-mid: #6E8A80; --green-accent: #3F6055; --green-bright: #2C463D; /* semantics, darkened for a light ground */ --success: #136A2C; --warning: #7A5300; --danger: #B31D28; --info: #0757B8; /* The fills above are all dark in this theme, so what sits on them is white rather than near-black. */ --on-accent: #FFFFFF; /* A field reads as a field by its border here, not by being darker than the card it sits on. */ --bg-input: #FFFFFF; --mint-glow: rgba(63, 96, 85, 0.16); --sage-glow: rgba(63, 96, 85, 0.30); --focus-ring: 0 0 0 2px rgba(63, 96, 85, 0.40); /* Elevation without the inset white highlight, which does nothing on a white surface. Depth here is an ordinary soft shadow, tinted slightly green so it sits in the same family as everything else. */ --elev-1: 0 1px 2px rgba(20, 30, 25, 0.07), 0 0 0 1px rgba(20, 30, 25, 0.04); --elev-2: 0 2px 6px rgba(20, 30, 25, 0.09), 0 8px 24px rgba(20, 30, 25, 0.07); --elev-3: 0 12px 32px rgba(20, 30, 25, 0.13), 0 32px 64px rgba(20, 30, 25, 0.10); } /* An outlined button is a control, not a highlight. .btn-outline rings itself in --green-mid, a mid sage that on these lifted cards is louder than the label inside it. The quiet edge reads as a button without shouting; Midnight keeps the original, since it is the revert baseline. */ [data-theme="recessed"] .btn-outline, [data-theme="lifted"] .btn-outline, [data-theme="slate"] .btn-outline, [data-theme="graphite"] .btn-outline, [data-theme="daylight"] .btn-outline { border-color: var(--border-dark); } [data-theme="recessed"] .btn-outline:hover:not(:disabled), [data-theme="lifted"] .btn-outline:hover:not(:disabled), [data-theme="slate"] .btn-outline:hover:not(:disabled), [data-theme="graphite"] .btn-outline:hover:not(:disabled), [data-theme="daylight"] .btn-outline:hover:not(:disabled) { border-color: var(--green-mid); } /* Three things in the app are painted with literal colours rather than tokens, so a theme cannot reach them through custom properties alone. These are the only component-level rules any theme needs. */ /* The wordmark is a pale grey image -- rgb(156,168,160) -- and disappears on a light sidebar. brightness(0) collapses every channel while leaving the alpha alone, giving a black wordmark from the same file. */ [data-theme="daylight"] .logo { filter: brightness(0) opacity(0.82); } /* .btn-primary is a hardcoded pale-sage gradient carrying black text: on a near-white page that is a light shape on a light ground, which is not what the one action you came to take should look like. Inverted here -- deep green, white text, 7.6:1. */ [data-theme="daylight"] .btn-primary { background: linear-gradient(180deg, #4C7264 0%, #3A5A4F 100%); border-color: rgba(0, 0, 0, 0.18); color: #FFFFFF; } [data-theme="daylight"] .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #5A8375 0%, #46695C 100%); } /* The support composer's send button carries the same hardcoded pale gradient as .btn-primary and needs the same treatment. */ [data-theme="daylight"] .support-send { background: linear-gradient(180deg, #4C7264 0%, #3A5A4F 100%); color: #FFFFFF; } /* The count on a selected list row is white at 80%, which was legible on the dark fill and is not on the pale one. */ [data-theme="daylight"] .list-item.active .list-count { color: var(--green-accent); } /* Status badges and error panels carry literal pale reds and ambers chosen against a near-black ground -- #E88B82 on its own 30% tint measures 1.74:1 once the tint is over white. Re-pointed at the darkened semantic tokens, which are already tuned for this theme. .status-active is deliberately absent: its text is --mint-green, an alias into the ramp, so it flips to the dark step on its own and needs nothing. */ [data-theme="daylight"] .status-inactive, [data-theme="daylight"] .status-failed { background: rgba(179, 29, 40, 0.12); color: var(--danger); } [data-theme="daylight"] .status-pending { background: rgba(122, 83, 0, 0.13); color: var(--warning); } [data-theme="daylight"] .ob-test.bad, [data-theme="daylight"] .admin-result.bad { background: rgba(179, 29, 40, 0.10); border-color: rgba(179, 29, 40, 0.35); color: var(--danger); } /* --- Standard ----------------------------------------------------------- The light theme with the pastel palette: navy text, white cards, page and chrome in the pale periwinkle the card headers of the reference use, and the accents drawn from its chart colours -- periwinkle for the accent, mint for success, yellow for warning, coral for danger, the dark plum of its button for the primary button. THE SEPARATION COMES FROM TINT, NOT SHADOW. Cards are white on a periwinkle-tinted page (1.11:1), the sidebar and topbar are a step deeper in the same tint, so the three read as three surfaces without a heavy border anywhere. Worst text pairing is --text-muted on the nav at 5.3:1. */ [data-theme="standard"] { /* surfaces -- white cards, periwinkle-tinted everything else */ --bg-secondary: #F4F6FC; /* page / workspace */ --bg-primary: #FFFFFF; /* cards, panels, modals */ --bg-tertiary: #EAEFFB; /* list rows, wells: the card-header tint */ --bg-hover: #DFE6F8; --bg-nav: #E9EEFB; /* sidebar */ --bg-topbar: #E9EEFB; --bg-active: #D4DDF7; /* selected nav / row */ /* text -- the navy of the headings */ --text-primary: #262E5C; --text-secondary: #4A5280; --text-muted: #5A6389; --border-color: #DCE2F3; /* separators */ --border-dark: #C6CFEA; /* field and control edges */ --border-on: color-mix(in srgb, #4A5AA8 30%, var(--border-color)); /* The ramp, re-pointed at periwinkle. The names stay green because the whole app refers to them; only what they resolve to changes. --green-deep is a fill and --green-bright the text that sits on it. */ --green-deep: #DDE6FA; --green-mid: #8A9BD9; --green-accent: #4A5AA8; --green-bright: #2B3260; /* the chart pastels, darkened until they are legible as text */ --success: #1C7F66; /* mint */ --warning: #8A5E00; /* yellow */ --danger: #C43D3D; /* coral */ --info: #4A5AA8; /* periwinkle */ --on-accent: #FFFFFF; --bg-input: #FFFFFF; --mint-glow: rgba(74, 90, 168, 0.14); --sage-glow: rgba(74, 90, 168, 0.28); --focus-ring: 0 0 0 3px rgba(74, 90, 168, 0.30); /* Soft navy-tinted shadows; the dark scale's inset white highlight does nothing on white. */ --elev-1: 0 1px 2px rgba(38, 46, 92, 0.06), 0 0 0 1px rgba(38, 46, 92, 0.04); --elev-2: 0 2px 6px rgba(38, 46, 92, 0.08), 0 8px 24px rgba(38, 46, 92, 0.06); --elev-3: 0 12px 32px rgba(38, 46, 92, 0.12), 0 32px 64px rgba(38, 46, 92, 0.09); } /* The wordmark is a pale grey image and vanishes on white. */ [data-theme="standard"] .logo { filter: brightness(0) opacity(0.85); } /* The primary button is a hardcoded pale-sage gradient with black text -- the one bit of green a token cannot reach. The reference's button: dark plum, white text. */ [data-theme="standard"] .btn-primary, [data-theme="standard"] .support-send { background: #2E2A56; border-color: #2E2A56; color: #FFFFFF; } [data-theme="standard"] .btn-primary:hover:not(:disabled), [data-theme="standard"] .support-send:hover:not(:disabled) { background: #3B366E; border-color: #3B366E; } /* An outlined button is a control, not a highlight. */ [data-theme="standard"] .btn-outline { border-color: var(--border-dark); } [data-theme="standard"] .btn-outline:hover:not(:disabled) { border-color: #A5B0D6; } /* Status badges and error panels carry literal pale reds and ambers picked against near-black; here they take the chart pastels. */ [data-theme="standard"] .status-active, [data-theme="standard"] .status-sent { background: #D5F3EC; /* mint */ color: var(--success); } [data-theme="standard"] .status-inactive, [data-theme="standard"] .status-failed { background: #FFE1E1; /* coral */ color: var(--danger); } [data-theme="standard"] .status-pending { background: #FFF1C2; /* yellow */ color: var(--warning); } [data-theme="standard"] .ob-test.bad, [data-theme="standard"] .admin-result.bad { background: #FFF0F0; border-color: #FFC9C9; color: var(--danger); } [data-theme="standard"] .list-item.active .list-count { color: var(--green-accent); } /* ---- The pastels themselves -------------------------------------------- The reference is six colours, not one: periwinkle, mint, yellow, sky, coral and navy. The token layer above gives the theme its ground and its one accent; this block puts the other five where the reference puts them -- section title bars, the figures on the dashboard, bars and badges, every place a state or a category is shown. Each pastel is used as a FILL with navy text on it; the darkened forms in the token layer are for text on white. */ [data-theme="standard"] { --pw: #A9B8F0; --pw-pale: #E9EEFB; --pw-deep: #5B6AA8; --mint: #7ED9C8; --mint-pale: #D9F4EE; --sun: #FFD85C; --sun-pale: #FFF1C4; --sky: #7FDDF3; --sky-pale: #D9F5FB; --coral: #FF9A9A; --coral-pale: #FFE3E3; --navy: #2B3260; --plum: #2E2A56; } /* Section titles sit in the pale periwinkle bar the reference uses. */ [data-theme="standard"] .card-header { background: var(--pw-pale); border-bottom: 0; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; color: var(--navy); } [data-theme="standard"] .card-body > .card-h, [data-theme="standard"] .card-body > .card-h-row, [data-theme="standard"] .card-body > .channel-head { background: var(--pw-pale); padding: 8px 14px; border-radius: 8px; color: var(--navy); } [data-theme="standard"] .card-body > .card-h-row .card-h { background: none; padding: 0; } /* Sidebar: the selected page is a periwinkle block, navy on it. */ [data-theme="standard"] .nav-link.active { background: var(--pw); color: var(--navy); } [data-theme="standard"] .nav-link:hover:not(.active) { background: var(--pw-pale); } [data-theme="standard"] .nav-badge, [data-theme="standard"] .tab-badge, [data-theme="standard"] .unread-pip { background: var(--coral); color: var(--navy); } [data-theme="standard"] .feed-email.unread .sms-who::before { background: var(--coral); } /* The dashboard figures: each card its own pastel, the number in navy. */ [data-theme="standard"] .stat-card { border: 0; } [data-theme="standard"] .stat-card:nth-child(4n+1) { background: var(--pw-pale); } [data-theme="standard"] .stat-card:nth-child(4n+2) { background: var(--mint-pale); } [data-theme="standard"] .stat-card:nth-child(4n+3) { background: var(--sun-pale); } [data-theme="standard"] .stat-card:nth-child(4n+4) { background: var(--sky-pale); } [data-theme="standard"] .stat-value { color: var(--navy); font-weight: 700; } [data-theme="standard"] .stat-label { color: var(--navy); opacity: .75; } /* Funnel: one pastel per stage, the way the reference's charts read. */ [data-theme="standard"] .funnel-bar { background: var(--pw-pale); } [data-theme="standard"] .funnel-stage:nth-child(1) .funnel-bar i { background: var(--pw); } [data-theme="standard"] .funnel-stage:nth-child(2) .funnel-bar i { background: var(--mint); } [data-theme="standard"] .funnel-stage:nth-child(3) .funnel-bar i { background: var(--sun); } [data-theme="standard"] .funnel-stage:nth-child(4) .funnel-bar i { background: var(--sky); } [data-theme="standard"] .funnel-value .funnel-n { color: var(--navy); } [data-theme="standard"] .funnel-value .funnel-bar i { background: var(--mint); } [data-theme="standard"] .funnel-n { color: var(--navy); } [data-theme="standard"] .progress-fill { background: linear-gradient(90deg, var(--sky), var(--pw)); } /* Quick actions: a pastel each. */ [data-theme="standard"] .action-btn { border: 0; color: var(--navy); } [data-theme="standard"] .action-btn:nth-child(4n+1) { background: var(--pw-pale); } [data-theme="standard"] .action-btn:nth-child(4n+2) { background: var(--mint-pale); } [data-theme="standard"] .action-btn:nth-child(4n+3) { background: var(--sun-pale); } [data-theme="standard"] .action-btn:nth-child(4n+4) { background: var(--sky-pale); } [data-theme="standard"] .action-btn:hover { filter: brightness(.96); } /* People: periwinkle initials. */ [data-theme="standard"] .cv-av, [data-theme="standard"] .agent-avatar { background: var(--pw); color: var(--navy); } /* Channels: each its own pastel, everywhere a channel is named. */ [data-theme="standard"] .ch-tag { color: var(--navy); font-weight: 600; } [data-theme="standard"] .ch-tag.ch-email { background: var(--pw); } [data-theme="standard"] .ch-tag.ch-text { background: var(--mint); } [data-theme="standard"] .ch-tag.ch-web-chat { background: var(--sky); } [data-theme="standard"] .ch-tag.ch-call { background: var(--sun); } [data-theme="standard"] .ch-tag:not(.ch-email):not(.ch-text):not(.ch-web-chat):not(.ch-call) { background: var(--pw-pale); } [data-theme="standard"] .campaign-channel { background: var(--sky); color: var(--navy); } [data-theme="standard"] .tag-won { background: var(--mint); color: var(--navy); } [data-theme="standard"] .tag.is-bad { background: var(--coral-pale); } /* States: mint good, yellow waiting, coral wrong, periwinkle done. */ [data-theme="standard"] .campaign-status.status-draft { background: var(--sun-pale); color: var(--navy); } [data-theme="standard"] .campaign-status.status-active { background: var(--mint); color: var(--navy); } [data-theme="standard"] .campaign-status.status-paused { background: var(--sun); color: var(--navy); } [data-theme="standard"] .campaign-status.status-completed { background: var(--pw); color: var(--navy); } [data-theme="standard"] .campaign-status.status-deleted { background: var(--coral); color: var(--navy); } [data-theme="standard"] .status-active, [data-theme="standard"] .status-sent { background: var(--mint); color: var(--navy); } [data-theme="standard"] .status-pending { background: var(--sun); color: var(--navy); } [data-theme="standard"] .status-inactive, [data-theme="standard"] .status-failed { background: var(--coral); color: var(--navy); } [data-theme="standard"] .status-pill.is-good { background: var(--mint); color: var(--navy); } [data-theme="standard"] .status-pill.is-bad { background: var(--coral); color: var(--navy); } [data-theme="standard"] .mb-score.is-good { background: var(--mint); color: var(--navy); } [data-theme="standard"] .mb-score.is-warning { background: var(--sun); color: var(--navy); } [data-theme="standard"] .mb-score.is-bad { background: var(--coral); color: var(--navy); } [data-theme="standard"] .mb-dns.is-pass { background: var(--mint-pale); border-color: var(--mint); color: var(--navy); } [data-theme="standard"] .mb-dns.is-missing { background: var(--coral-pale); border-color: var(--coral); color: var(--navy); } [data-theme="standard"] .mb-dns.is-unknown { background: var(--sun-pale); border-color: var(--sun); color: var(--navy); } [data-theme="standard"] .mb-issue.is-bad { border-left-color: var(--coral); background: var(--coral-pale); } [data-theme="standard"] .mb-issue.is-warn { border-left-color: var(--sun); background: var(--sun-pale); } [data-theme="standard"] .mb-issue.is-info { border-left-color: var(--pw); background: var(--pw-pale); color: var(--navy); } [data-theme="standard"] .mb-sign-value.is-saved { background: var(--mint-pale); border-color: var(--mint); } [data-theme="standard"] .ch-chip.is-on { background: var(--mint-pale); border-color: var(--mint); } [data-theme="standard"] .ch-chip.is-on::before { background: var(--navy); } [data-theme="standard"] .ch-chip.is-bad { background: var(--coral-pale); border-color: var(--coral); } /* Tabs, controls, cards. */ [data-theme="standard"] .mb-tab.active { color: var(--navy); border-bottom: 3px solid var(--pw-deep); } [data-theme="standard"] input[type="checkbox"], [data-theme="standard"] input[type="radio"] { accent-color: var(--pw-deep); } [data-theme="standard"] .campaign-card { background: #FFFFFF; } [data-theme="standard"] .campaign-card:hover, [data-theme="standard"] .agent-card:hover { border-color: var(--pw); } [data-theme="standard"] .inbox-btn-primary { background: var(--plum); border-color: var(--plum); } [data-theme="standard"] .btn-danger { background: var(--coral); border-color: var(--coral); color: var(--navy); } [data-theme="standard"] .btn-danger:hover:not(:disabled) { background: #FF8585; border-color: #FF8585; } [data-theme="standard"] .btn-outline:hover:not(:disabled) { background: var(--pw-pale); border-color: var(--pw); } [data-theme="standard"] .topbar-offer { background: var(--plum); color: #FFFFFF; } [data-theme="standard"] .mb-row { background: #FFFFFF; } [data-theme="standard"] .sms-thread[open] > summary { background: var(--pw-pale); } /* ============================================ The picker, on the Admin page ============================================ */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .theme-card { display: block; width: 100%; padding: 0; text-align: left; font-family: inherit; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; } .theme-card:hover { border-color: var(--green-mid); } .theme-card:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; } .theme-card.active { border-color: var(--green-accent); } /* The swatch is a miniature of the actual layout -- nav down the left, page behind, a card floating on it -- because that relationship is the whole point of the theme. A row of three flat colour chips would not show it. */ .theme-swatch { position: relative; display: flex; /* These palettes differ by a few percent of lightness, which is the whole argument for changing them and also what makes them hard to show. A small chip would render every theme as the same dark rectangle, so the swatch is given real area and the card real edges. */ height: 104px; border-bottom: 1px solid var(--border-color); } .theme-swatch-nav { width: 28%; } .theme-swatch-page { flex: 1; position: relative; } .theme-swatch-card { position: absolute; left: 9%; right: 9%; top: 14%; bottom: 14%; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.45); } .theme-meta { padding: 10px 12px; } .theme-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); } .theme-current { padding: 1px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-bright); background: var(--green-deep); border-radius: 3px; } .theme-note { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); } .theme-hint { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }