/* The palette, in one place. It used to be in three: site/style.css declared --high/--mid/--low, the options page declared --green/--amber/--red for the same three colours, and the extension's own stylesheets wrote the hexes out literally, twenty-five times. Three copies of one identity is three places for it to drift, and the drift had already started — the site sat on #141414 and the options page on #101010, so the two halves of the same product had different backgrounds. Everything canonical here is prefixed `--nrx-`, because this file is injected into Netflix, Prime Video and Disney+ as a content-script stylesheet, where `:root` is *their* element. A bare `--bg` would be ours to define and theirs to collide with; a prefixed one cannot be either. The two legacy vocabularies are kept as aliases at the bottom rather than rewritten out of the two large stylesheets that use them. That is deliberate: aliasing is a change with no visual consequence to review, where a rename across two thousand lines of CSS is a change where every miss is a bug you only find by looking. The names can converge later, one file at a time. Loaded by: manifest.json (content_scripts.css, first), options.html, and site/index.html — which reaches it at ../tokens.css, so the site must be served from the repo root rather than from site/ alone. */ :root { /* --- the rating bands --------------------------------------------------- The ONLY colour in the product, and the reason for that is the whole brand decision: green means "worth watching". Spend green on a button and every badge on the page is worth fractionally less, because the reader has learnt that green sometimes just means "clickable". So these four are reserved for one job — reporting what IMDb says about a title — and nothing else may use them. Chrome is monochrome. See --nrx-accent below, which is what a button, a pressed chip or a slider uses instead. Two rules, and the second is the one that keeps getting broken: 1. Only a rating may be coloured. 2. Colour lands on the GLYPH, never on the container. The score is coloured; the badge's border, plate, halo and underline are not. A tier-coloured frame adds no information the number has not already given, and it doubles the coloured area — so a wall of tiles stops reading as coloured scores and starts reading as coloured boxes. The one exception to (2) is a legend whose whole subject is the scale: the band control and the trio track in the settings page, and the swatch row on the website. There the colour IS the content. Prose about a rating is not a rating. A caveat under a score, a stale-order footnote, an "on" dot — all of those wore amber once, which put them in conversation with every 6.8 on the page. They are muted grey now; weight and position carry the emphasis instead. */ --nrx-green: #46d369; /* at or above the high threshold — worth your time */ --nrx-amber: #e5a00d; /* between the two — a maybe */ --nrx-red: #e87c78; /* below the low threshold */ --nrx-grey: #8c8c8c; /* no rating found: an absence, not a low score */ /* --- the brand accent ---------------------------------------------------- Near-white, deliberately. Under this identity the brand asserts no colour of its own: buttons, pressed states, sliders and links are neutral, so the only hue anywhere on a Netflix page is a rating. It also solves a second problem. The old accent was #46d369 on #141414 — Netflix's own green on Netflix's own ground. For a product that had to be renamed because it cannot imply affiliation, wearing the incumbent's palette was the same mistake in another medium. */ --nrx-accent: #f4f4f5; --nrx-accent-ink: #0e0e0f; /* text ON the accent */ --nrx-accent-soft: rgba(255, 255, 255, 0.14); --nrx-accent-line: rgba(255, 255, 255, 0.42); /* --- surfaces ----------------------------------------------------------- #141414 rather than the options page's old #101010. Both were defensible alone; having both was not. The site's value wins because it is the one a buyer sees first and the one the marketing screenshots were taken on. */ --nrx-bg: #0e0e0f; --nrx-bg-alt: #17181a; --nrx-surface: #1f2023; --nrx-surface-2: #26272b; --nrx-sunken: #101010; --nrx-line: #2a2b2e; --nrx-line-soft: #212226; --nrx-line-hi: #3a3b3f; /* --- text --------------------------------------------------------------- The contrast notes came from the options page and are worth keeping: they are the reason these three values and not three others. */ --nrx-text: #f2f2f2; --nrx-text-2: #9b9ca0; --nrx-text-3: #74757a; /* 5.3:1 — the floor for anything with words in it */ --nrx-focus: #7ab8ff; /* --- the overlay control language --------------------------------------- Every floating panel — the player overlay, the browse launcher, the filter pane — draws the same three things: a row label, a control, a section heading. They were drawn at 9.5, 11, 11.5, 12 and 13px, at weights 400 to 700, in three stylesheets that had each picked their own. Nobody chose that; it accumulated. The sizes below are one notch larger than what they replace, and that is a legibility fix rather than a taste one. These panels float over video and over artwork, so their ground is whatever the film is doing — and on a white frame, 11.5px of near-white was reported unreadable. It was. --nrx-ctl-bg is the more important half of that fix. A control on a glass panel cannot borrow the panel's contrast, because the panel has none of its own: it is a 45%-fill plate over a backdrop blur, so over a snow scene it lifts to near-white and takes any light text on it with it. The controls therefore carry their OWN dark ground, opaque enough that what is behind the panel cannot reach them. The plate stays translucent — that is the effect people asked for — but it is now decoration, and the controls are information. Those are different jobs and they no longer share a surface. The filter pane had already arrived at this independently (#232323 chips with #f5f5f5 on them, which is why it never had the problem). This makes it the rule rather than one panel's good luck. */ /* THE TYPE SCALE. Six sizes were in use inside 2.5px of each other — 11, 11.5, 12, 12.5, 13, 13.5 — across ten stylesheets. That is not a hierarchy; a half-pixel is invisible, so what it produced was drift that reads as carelessness while signalling nothing. Two panels sitting side by side set the same kind of text at different sizes purely by the order they were written in. Five steps, named for the JOB rather than for the size, so a new rule asks "what is this text for" instead of "what looked right last time". The ratio is roughly 1.15 between neighbours — wide enough that two adjacent steps are distinguishable at a glance, which is the only reason to have a step at all. display 20px the one thing a panel is about — a picked title title 15px a panel's own heading body 13px sentences: notes, explanations, synopses ctl 12.5px chips, selects, values — a control's own text label 12px the name OF a control meta 11.5px counts, footers, provenance, filter chips section 10.5px uppercase names for a GROUP of controls The two ends stay outside the scale on purpose: the IMDb score (26px) is a number read across a room, and the subtitle sizes are a user setting in vh. */ /* The × that closes a panel. It was set four times in four stylesheets at 12, 13, 14 and 15px, on hit targets of 22 and 26px — the same control, sized by whoever wrote that panel. One glyph, one target, everywhere. */ --nrx-glyph-close: 13px; --nrx-hit-close: 26px; /* One stack for every surface. "Netflix Sans" is what the host page is set in, so a panel drawn over Netflix matches it; anywhere it is not installed (Prime Video, the settings page, the site) the same rule falls through to the system UI face rather than to Helvetica, so nothing ever looks like a web page from 2009. No web font is loaded, by anyone, ever. */ --nrx-font: "Netflix Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nrx-type-display: 20px; --nrx-type-title: 15px; --nrx-type-body: 13px; --nrx-type-meta: 11.5px; --nrx-ctl-size: 12.5px; /* chips, selects, values */ --nrx-ctl-weight: 600; --nrx-ctl-bg: rgba(18, 18, 20, 0.78); --nrx-ctl-bg-hi: rgba(44, 45, 49, 0.86); /* hover */ --nrx-ctl-line: rgba(255, 255, 255, 0.26); --nrx-ctl-line-hi: rgba(255, 255, 255, 0.44); --nrx-ctl-ink: #f2f2f3; --nrx-ui-label-size: 12px; /* "Speed", "Rating" — names a control */ --nrx-ui-label-weight: 600; --nrx-ui-label-ink: #eff0f3; --nrx-ui-section-size: 10.5px; /* "SUBTITLES" — names a group of them */ --nrx-ui-section-weight: 700; --nrx-ui-section-ink: #dcdde1; /* Type on a plate whose background is the film. Two shadows, doing two jobs. The tight one is an edge, so the glyph has a boundary at any size. The wide soft one darkens the plate immediately around the glyph — which is the half that actually rescues light type on a white frame, because it lowers the ground rather than outlining the mark. It is the treatment every subtitle renderer uses, for exactly this problem. Both are invisible over a dark frame. Neither is ever applied to text on --nrx-ctl-bg: a control carries its own ground, and a shadow there would only smear it. */ --nrx-ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 0 7px rgba(0, 0, 0, 0.45); /* --- geometry ----------------------------------------------------------- 14px is the glass radius. A blurred surface with a tight corner looks clipped rather than moulded, which is why the panels moved to it and why the site should match. */ --nrx-radius: 14px; --nrx-radius-md: 8px; --nrx-radius-sm: 6px; --nrx-ease: cubic-bezier(.2, .7, .3, 1); /* --- the glass surface -------------------------------------------------- This is the brand, more than any colour is: it is what the player overlay and the browse launcher are made of, and what the website's cards should be made of so the two look like one product. Four things make it read as glass rather than as a grey box with a blur behind it. A heavy blur with saturation pushed UP — glass concentrates the colour behind it, so a boost is what makes the frame read as *through* the panel rather than as a smear under it. A near-transparent fill, because the plate is mostly blur. A gradient brighter at the top, because real glass catches light on its upper edge. And a hairline brighter above than below. --nrx-glass-alpha is written per-panel by glass.js from the user's own solidity setting; the fallback is what an unwritten panel looks like. */ --nrx-glass-blur: blur(30px) saturate(180%); --nrx-glass-fill: rgba(22, 22, 24, 0.45); --nrx-glass-sheen: linear-gradient( to bottom, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100% ); --nrx-glass-edge: inset 0 1px 0 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 8px 24px -12px rgba(255, 255, 255, 0.18); --nrx-glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); /* --- aliases ------------------------------------------------------------ The two names each surface already uses, pointed at the canonical values above. Nothing downstream has to change for the palette to become single sourced, and a colour now moves in one edit rather than three. site/style.css */ --bg: var(--nrx-bg); --bg-alt: var(--nrx-bg-alt); --surface: var(--nrx-surface); --surface-2: var(--nrx-surface-2); --line: var(--nrx-line); --line-soft: var(--nrx-line-soft); --text: var(--nrx-text); --text-mid: var(--nrx-text-2); --text-dim: var(--nrx-text-3); --high: var(--nrx-green); --mid: var(--nrx-amber); --low: var(--nrx-red); --none: var(--nrx-grey); --accent: var(--nrx-accent); --radius: var(--nrx-radius); --radius-sm: var(--nrx-radius-md); --ease: var(--nrx-ease); /* options.html */ --green: var(--nrx-green); --amber: var(--nrx-amber); --red: var(--nrx-red); --card: var(--nrx-bg-alt); --sunken: var(--nrx-sunken); --line-hi: var(--nrx-line-hi); --text-2: var(--nrx-text-2); --text-3: var(--nrx-text-3); --focus: var(--nrx-focus); --r-1: var(--nrx-radius-sm); --r-2: var(--nrx-radius-md); --r-3: 12px; /* There was a --netflix: #e50914 here, spent on primary buttons in the settings page, the filter panel's Clear, the picker's Watch, the genre panel's active rail and the sort's pressed state. It is gone, and nothing should bring it back. Two independent reasons: red on a control means "this destroys something" to anyone who has used software before, and not one of those five buttons destroyed anything; and it was the incumbent's brand colour worn by a product that had to be renamed precisely because it may not imply affiliation. --nrx-accent replaced all five. */ }