/* The hidden-category picker. Everything here is prefixed nrx-genre- so it cannot reach a badge, a chip, the season strip or the sort bar — content.css and sort.css own those, and this file is not allowed to have an opinion about them. Unlike the badge, none of this sits on Netflix's artwork and none of it sits in Netflix's flow: the trigger is a fixed corner button and the panel is a layer above the page. That is what lets it borrow Netflix's surfaces and type without having to fight anything for legibility or for space — nothing below participates in Netflix's layout, so nothing below can shift it. */ /* The root is a positioning host for two fixed children and nothing else. Zero size and no pointer surface of its own, so an element parked on can never intercept a click meant for the page. */ .nrx-genre-root { position: static; font-family: var(--nrx-font); } /* --- the trigger ---------------------------------------------------------- Bottom-right, out of the document flow entirely. Netflix leaves that corner empty on every browse surface — its ribbons are top-left, its previews grow from the row they belong to, its footer is below the fold — and it is where a browser user already expects an extension's own controls to live. Quiet at rest is the whole design. At 0.6 it reads as a corner affordance rather than as a piece of Netflix's UI, and it comes fully forward the moment it is pointed at or focused, which is the only time it needs to be read. */ .nrx-genre-trigger { position: fixed; right: 20px; bottom: 20px; z-index: 2147482000; /* Netflix's own reset does not reach an element it never rendered, so the button starts from the UA default and has to be talked all the way down. */ margin: 0; padding: 7px 13px; border: 1px solid #2f2f2f; border-radius: 999px; background: #181818; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); color: #e5e5e5; font: inherit; font-size: var(--nrx-ui-label-size, 12px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; opacity: 0.6; cursor: pointer; transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .nrx-genre-trigger:hover, .nrx-genre-trigger:focus-visible, .nrx-genre-trigger[aria-expanded="true"] { opacity: 1; border-color: #8c8c8c; background: #262626; } /* :focus-visible rather than :focus, and white at 2px — the same ring content.css draws on a badge and sort.css draws on its buttons, because someone tabbing between the three should not have to learn three focus styles. */ .nrx-genre-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* --- the scrim ------------------------------------------------------------ Focus is genuinely trapped while the panel is open, so the page behind it is genuinely inert and should look it. Light, though: this is a panel you open in the middle of browsing, and blacking out the rows that made you open it would be perverse. */ .nrx-genre-backdrop { position: fixed; inset: 0; z-index: 2147482500; background: rgba(0, 0, 0, 0.45); } /* --- the panel ------------------------------------------------------------ Anchored above the trigger rather than centred, so the corner it came from is still visibly where it came from. Width is capped but collapses on a narrow window; height is capped against the viewport so the list scrolls rather than the page. */ .nrx-genre-panel { position: fixed; right: 20px; bottom: 68px; z-index: 2147482600; display: flex; flex-direction: column; width: min(410px, calc(100vw - 40px)); max-height: min(74vh, 620px); box-sizing: border-box; border: 1px solid #2f2f2f; border-radius: 8px; background: #181818; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); color: #e5e5e5; font-size: var(--nrx-type-body, 13px); line-height: 1.4; } /* Both are toggled by the `hidden` property in genres.js, and both set a `display` the UA's own [hidden] rule would otherwise lose to. */ .nrx-genre-panel[hidden], .nrx-genre-backdrop[hidden] { display: none; } .nrx-genre-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 0; } .nrx-genre-title { margin: 0; color: #fff; font-size: var(--nrx-type-title, 15px); font-weight: 700; line-height: 1.3; } .nrx-genre-close { margin: 0; padding: 2px 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #b3b3b3; font: inherit; font-size: var(--nrx-glyph-close, 13px); line-height: 1.4; cursor: pointer; } .nrx-genre-close:hover { border-color: #4d4d4d; color: #fff; } .nrx-genre-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* What this list is, in two sentences, above the search field rather than behind a help icon — a panel of numbers nobody recognises needs its premise stated before the numbers, not after them. #b3b3b3 on #181818 is 8.4:1: a footnote by weight, never by legibility. */ .nrx-genre-note { margin: 6px 14px 10px; color: #b3b3b3; font-size: var(--nrx-ui-label-size, 12px); line-height: 1.45; } .nrx-genre-search { margin: 0 14px; padding: 7px 10px; border: 1px solid #4d4d4d; border-radius: 4px; background: #101010; color: #fff; font: inherit; font-size: var(--nrx-type-body, 13px); line-height: 1.4; } .nrx-genre-search::placeholder { color: #8c8c8c; } /* :focus, not :focus-visible: this field is focused the instant the panel opens, by keyboard and by mouse alike, and a text box with a caret in it and no ring around it looks disabled. */ .nrx-genre-search:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: transparent; } /* "142 of 184 categories". Also the empty state, which is why it sits between the field and the list rather than inside the list — a message about how many rows there are should not be one of the rows. */ .nrx-genre-status { padding: 8px 14px 6px; color: #8c8c8c; font-size: var(--nrx-type-meta, 11.5px); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; text-transform: uppercase; } .nrx-genre-list { flex: 1 1 auto; min-height: 0; /* or the flex child refuses to shrink and the panel overflows */ overflow-y: auto; overscroll-behavior: contain; /* don't hand a spent scroll to Netflix's page */ padding: 0 6px 6px; scrollbar-width: thin; scrollbar-color: #4d4d4d transparent; } /* Sticky, because the group is what tells you whether "Foreign Thrillers" is filed under Thrillers or International, and eighteen groups of rows scroll that answer off the top almost immediately. The solid background is what stops the rows smearing through it. */ .nrx-genre-group-name { position: sticky; top: 0; z-index: 1; padding: 8px 8px 4px; background: #181818; color: #8c8c8c; font-size: var(--nrx-type-meta, 11.5px); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } /* A row is now up to two lines: the name and its code, and under them the counts — when there are any. Column rather than the single baseline row this used to be, because "TV Mysteries · 112 titles · 31 clear your bar · 4366" is four facts fighting over a 410px line, and the one that loses is the name. A row with nothing behind it renders no second line at all, so the unstocked majority is exactly the row this panel has always drawn — same height, same two elements, same baseline. That is the whole answer to a fresh install: the counts are additive, not a column everything has to have a value in. */ .nrx-genre-option { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-left: 3px solid transparent; /* held open so the active rail can't shift the row */ border-radius: 4px; color: #e5e5e5; font-size: var(--nrx-type-body, 13px); text-decoration: none; cursor: pointer; } /* The line that was the whole row until the counts arrived, unchanged in every respect that matters: name left, code right, aligned on their baselines. */ .nrx-genre-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* One highlight, moved by the pointer and by the arrow keys alike — there is no separate :hover rule on purpose. Two lit rows at once is an ambiguous answer to the only question this panel has to answer clearly: what Enter opens. A white rail on the row about to be acted on — the accent, like every other emphasis in this product. White on #262626 is 12:1. */ .nrx-genre-option[data-active] { border-left-color: var(--nrx-accent, #f4f4f5); background: #262626; color: #fff; } /* Reachable by pointer and by aria-activedescendant, never by Tab — but a ⌘-click leaves the browser free to focus the anchor anyway, and an invisible focus is worse than an unexpected one. */ .nrx-genre-option:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .nrx-genre-name { min-width: 0; } /* The code is the durable part — it is what the URL is made of and what you would write down — so it is shown rather than left implicit in the link. #b3b3b3 on #262626 is 7.2:1. */ .nrx-genre-code { flex: 0 0 auto; color: #b3b3b3; font-size: var(--nrx-type-meta, 11.5px); font-variant-numeric: tabular-nums; } /* "112 titles · 31 clear your bar" — how much of this category the extension has actually seen, and how much of that is worth your evening. MUTED GREY, AND NOT A RATING COLOUR. This is the one place in the panel where the temptation is real: 31-out-of-112 is a quality signal, green means "worth it" three inches away on every badge on the page behind this, and colouring the good ones green would read instantly. It is still wrong. Green in this product is a claim about ONE TITLE'S rating, and the moment a count wears it the reader has to learn a second meaning for the same colour — is that green because the number is high, or because the titles behind it are? A count is not a rating and never gets one of the three bands. Ordering carries the ranking instead; the eye finds the top of the band without being coloured towards it. --nrx-text-2 is 6.1:1 on #181818: a second line by weight, never by legibility. Tabular numerals so a column of them lines up as a column. */ .nrx-genre-stock { color: var(--nrx-text-2, #9b9ca0); font-size: var(--nrx-type-meta, 11.5px); font-variant-numeric: tabular-nums; line-height: 1.35; } /* Still waiting on the worker for the second half of the sentence. Dimmed by one step rather than given a spinner or a placeholder: the number that IS known is on screen and correct, and a row that is 60% answered should look like a row that is 60% answered rather than like a row that is loading. Not animated. The rows resolve one at a time over a couple of seconds, and a list of a dozen pulsing lines would be the busiest thing in a panel whose whole job is to be scanned. */ .nrx-genre-stock[data-pending] { color: var(--nrx-text-3, #74757a); } /* The active row lifts its counts too, or the highlight lands on a row whose second line stays as dim as its unhighlighted neighbours' — which reads as the count belonging to the row below. */ .nrx-genre-option[data-active] .nrx-genre-stock { color: #d2d3d6; } .nrx-genre-footer { border-top: 1px solid #2f2f2f; padding: 9px 14px 11px; background: #101010; border-radius: 0 0 7px 7px; } .nrx-genre-keys { color: #8c8c8c; font-size: var(--nrx-type-meta, 11.5px); line-height: 1.5; } /* The dead-code caveat: the list is the best available, and the best available is not a guarantee. Muted grey rather than the amber this used to be — amber is a rating band, and a paragraph of prose wearing a rating band's colour invites the reader to decode it as one. 7:1 on #101010, so the one paragraph that qualifies everything above it is never the hardest one to read. */ .nrx-genre-caveat { margin-top: 6px; color: var(--nrx-text-2, #9b9ca0); font-size: var(--nrx-type-meta, 11.5px); line-height: 1.45; } /* The panel itself never animates in — it is opened deliberately and should be there when the eye arrives — so the trigger's fade is the whole of what reduced motion has to switch off. */ @media (prefers-reduced-motion: reduce) { .nrx-genre-trigger { transition: none; } }