/* The on-page filter status bar. Everything here is prefixed nrx-filters- so it cannot reach a badge, a chip, the sort bar, the launcher or the pick panel — content.css, sort.css, genres.css, pick.css and browse.css own those, and this file is not allowed to have an opinion about them. Nothing here reaches outside that namespace. There used to be one exception — a peek override on content.css's .nrx-dimmed — and it went with the peek itself: the handler that turned it on was attached to nothing, so the class could never appear on the document and the rule could never fire. This file runs on Netflix, Prime Video, Amazon and Disney+, so nothing here assumes a particular site's reset. Every property the bar needs is talked all the way down from the UA default. --- legibility ------------------------------------------------------------ FINDINGS problem 4 is that the launcher pills are too faint to read as controls over artwork that changes underneath them. This element must not repeat that, because unlike a launcher it is the answer to "why does my homepage look broken" — it is worthless if it cannot be read at a glance over a black poster, a white one, or a bright title card. So it is not a translucent pill with a raised opacity. It is a fully opaque surface (#0b0b0b, no alpha anywhere in the background chain), carrying its own 1px light ring so its edge is visible against black artwork, its own dark drop shadow so its edge is visible against white artwork, and text at #f5f5f5 — about 17:1 on that ground, where AA asks for 4.5. Nothing on it is below 7:1. There is no resting opacity and no hover-to-reveal: it is either on screen and readable, or absent. */ /* The root is a positioning host for one fixed child 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 underneath. */ .nrx-filters-root { position: static; } /* --- the headline --------------------------------------------------------- */ .nrx-filters-head { display: flex; align-items: center; gap: 8px; } .nrx-filters-count { margin: 0; font-size: var(--nrx-type-body, 13px); font-weight: 600; font-variant-numeric: tabular-nums; color: #f5f5f5; text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } /* --- the chips ------------------------------------------------------------ One per active filter, each one the whole control: label, how many titles it is burying, and the cross that clears it. A separate remove button inside a chip would double the tab stops for no gain — there is nothing else a chip could do. */ .nrx-filters-chips { display: flex; flex-wrap: wrap; gap: 6px; /* A long genre list wraps rather than widening the bar, and scrolls rather than growing it past a few lines. */ max-height: 5.2em; overflow-y: auto; } .nrx-filters-chip { display: inline-flex; align-items: center; gap: 6px; /* The UA default for a button is a 2px system border, centred text and the system font; none of that survives contact with this bar. */ margin: 0; padding: 5px 9px; border: 1px solid #4a4a4a; border-radius: 999px; background: #232323; color: #f5f5f5; font: inherit; font-size: var(--nrx-ui-label-size, 12px); font-weight: 600; line-height: 1.3; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } .nrx-filters-chip:hover, .nrx-filters-chip:focus-visible { background: #3a3a3a; border-color: #b3b3b3; } /* The count carried by the chip, not by the label: it is a number about this filter, and putting it in the same weight as the name would make the chip read as a sentence. Tabular figures so a chip does not resize as its count ticks past ten while rows load. */ .nrx-filters-chip-count { padding: 1px 5px; border-radius: 999px; background: #0b0b0b; /* Was #ffc94d — a saturated yellow, and the last hue anywhere in the chrome. It survived the palette sweep only because it is not one of the three rating hexes anyone was grepping for. A count of active genres is not a rating, so it does not get a colour. */ color: var(--nrx-accent, #f4f4f5); font-size: var(--nrx-type-meta, 11.5px); font-weight: 700; font-variant-numeric: tabular-nums; } .nrx-filters-chip-count[hidden] { display: none; } .nrx-filters-chip-x { color: #b3b3b3; font-size: var(--nrx-type-meta, 11.5px); line-height: 1; } .nrx-filters-chip:hover .nrx-filters-chip-x, .nrx-filters-chip:focus-visible .nrx-filters-chip-x { color: #ffffff; } /* --- the actions ---------------------------------------------------------- */ .nrx-filters-actions { display: flex; flex-wrap: wrap; gap: 6px; } .nrx-filters-btn { margin: 0; padding: 6px 11px; border: 1px solid #5a5a5a; border-radius: 4px; background: #191919; color: #f5f5f5; font: inherit; font-size: var(--nrx-ui-label-size, 12px); font-weight: 600; line-height: 1.3; cursor: pointer; /* A hold-to-peek button that selects its own label on a long press feels broken. This is the only place the property is needed. */ user-select: none; -webkit-user-select: none; transition: background-color 0.12s ease, border-color 0.12s ease; } /* Stated rather than left to the UA sheet: the peek button hides itself when there is nothing dimmed to see through, and a site stylesheet that sets a display on button elements would otherwise keep it on screen. */ .nrx-filters-btn[hidden] { display: none; } .nrx-filters-btn:hover, .nrx-filters-btn:focus-visible { background: #303030; border-color: #b3b3b3; } /* Clearing everything is the loud one — it is the button that answers "my homepage looks broken" — so it is the one that carries the extension's emphasis rather than another grey outline. The accent is how this product spends emphasis: near-white on dark, ink on the fill, 16:1. Not red. Red on a button reads as "this will destroy something", and clearing filters destroys nothing — it is the recovery action, the safest control in the panel. It was Netflix's own red besides, which this product cannot wear. */ .nrx-filters-clear { border-color: var(--nrx-accent, #f4f4f5); background: var(--nrx-accent, #f4f4f5); color: var(--nrx-accent-ink, #0e0e0f); } .nrx-filters-clear:hover, .nrx-filters-clear:focus-visible { background: #ffffff; border-color: #ffffff; } /* :focus-visible rather than :focus, and white at 2px — the same ring content.css draws on a badge, sort.css on its buttons and genres.css on its trigger, because someone tabbing between the four should not have to learn four focus styles. */ .nrx-filters-chip:focus-visible, .nrx-filters-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* The live region. Present to a screen reader, absent to everyone else — and clipped rather than display:none, which would stop it being announced at all. */ .nrx-filters-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- the peek ------------------------------------------------------------- The only rule in this file that names a class it does not own. content.css dims a card with `.nrx-dimmed { opacity: 0.35 } /* At 200% zoom on a laptop the viewport is effectively half as wide, so the rule above is already doing the work; this only stops the chip strip eating the window when a long genre list meets a short window. */ @media (max-height: 560px) { .nrx-filters-chips { max-height: 3.4em; } } @media (prefers-reduced-motion: reduce) { .nrx-filters-chip, .nrx-filters-btn { transition: none; } } /* --- the filter panel ------------------------------------------------------- The bar above says what is being hidden. This says what to hide, and it is a separate surface for a reason worth writing down: a chip that clears its own filter is a one-click escape hatch, and a control that sets one cannot share that hit area without a mis-click destroying a setting. Every colour is stated rather than inherited. This file runs on four sites whose resets it does not control, and a panel that borrowed a background would be unreadable on whichever of them changed theirs. */ /* It opens inside the launcher now rather than over the page. It was a modal with a scrim, which meant pressing Filters darkened the grid you were about to filter — the one thing you need to watch while filtering was the one thing it covered. Nothing here is positioned any more; it is a section of the pane, and the pane is already somewhere the user put it. The surface goes too. It sits ON glass, so its own opaque plate would read as a card dropped on the panel rather than as part of it; what is left is a hair of separation from the buttons above. */ .nrx-filterp-root { display: none; } .nrx-filterp-root[data-open="yes"] { display: block; } .nrx-filterp { box-sizing: border-box; width: min(340px, calc(100vw - 56px)); /* Against the viewport rather than the pane: the pane has no height of its own, it is as tall as this. Room for the launcher's buttons and its own padding is taken off. */ max-height: min(54vh, 440px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; /* Tightened from 14px, then from 9px. The pane is on screen the whole time someone is choosing something, so every gap is paid on every screen — and with the explanatory copy gone the rows read as a set without needing air between them to separate paragraphs that no longer exist. Height is the binding constraint here, not width: this thing sits over artwork the user is trying to look at, and a panel that covers half the window is a modal wearing an inspector's clothes. 7px still separates the rows because each one carries its own bold label. */ gap: 7px; margin: 2px 0 0; padding: 6px 4px 2px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #f5f5f5; font-family: var(--nrx-font); font-size: var(--nrx-type-body, 13px); line-height: 1.45; text-align: left; } .nrx-filterp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .nrx-filterp-title { margin: 0; font-size: var(--nrx-type-title, 15px); font-weight: 700; color: #fff; } .nrx-filterp-x { margin: 0; padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; color: #b3b3b3; font: inherit; font-size: var(--nrx-glyph-close, 13px); line-height: 1; cursor: pointer; } .nrx-filterp-x:hover { color: #fff; background: #232323; } .nrx-filterp-note, .nrx-filterp-hint { margin: 0; color: #c3c4c8; font-size: var(--nrx-ui-label-size, 12px); text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } .nrx-filterp-hint { margin-top: 2px; font-size: var(--nrx-type-meta, 11.5px); } .nrx-filterp-row { display: flex; flex-direction: column; gap: 4px; } /* --- is this rule doing anything? ----------------------------------------- Reported plainly: "the rating duration filters is hard to see if they're active or not — no indication there." There was one signal and it was the value text turning grey: a colour change on two characters, at 12.5px, on a translucent panel over moving artwork. The label, the track and the handle looked identical either way, so a slider parked at 7.5 with dimming off read exactly like one burying half the page. The whole ROW answers now, and it answers by weight rather than by hue — colour in this product means a rating and nothing else, so an active filter cannot be green without competing with every badge behind the panel. An idle row recedes; an active one is at full strength and carries a marker in the margin. That reads at a glance and survives being over a bright frame, which a two-character colour change does not. A rail rather than a dot: it spans the row, so it says "this whole line is live" rather than decorating the label. 2px, because it sits beside type. */ .nrx-filterp-row { position: relative; padding-left: 10px; transition: opacity .12s ease; } .nrx-filterp-row::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--nrx-accent, #f4f4f5); opacity: 0; transition: opacity .12s ease; } .nrx-filterp-row[data-active="yes"]::before { opacity: 0.85; } /* Not `display: none` and not a colour swap — the controls stay legible and stay operable, because an idle rule is the one you are most likely about to turn on. This is recession, not disabling. */ .nrx-filterp-row[data-active="no"] { opacity: 0.62; } /* …except while you are using it. Reaching for a slider to arm a rule would otherwise mean adjusting something half-faded, and the fade would only lift after the value crossed into "active" — which is one interaction too late. */ .nrx-filterp-row[data-active="no"]:hover, .nrx-filterp-row[data-active="no"]:focus-within { opacity: 1; } @media (prefers-reduced-motion: reduce) { .nrx-filterp-row, .nrx-filterp-row::before { transition: none; } } .nrx-filterp-rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .nrx-filterp-rowhead label, .nrx-filterp-rowhead span { font-weight: var(--nrx-ui-label-weight, 600); font-size: var(--nrx-ui-label-size, 12px); color: var(--nrx-ui-label-ink, #dedfe2); text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } /* Green while the rule is doing something, grey while it is armed but idle — the same signal the settings page uses, so a number that is not filtering never wears the colour that means it is. */ /* Always legible, in both states. Green while the rule is doing something, grey while it is armed but idle — but never faded out and never blank: "what is my floor set to" is a question you ask precisely when the floor is off. */ .nrx-filterp-val { font-variant-numeric: tabular-nums; color: var(--nrx-accent, #f4f4f5); font-weight: 700; font-size: var(--nrx-type-body, 13px); /* On the bare plate, like every other readout in an overlay. */ text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } .nrx-filterp-val[data-on="no"] { color: #9a9a9a; } .nrx-filterp-range { width: 100%; margin: 0; accent-color: var(--nrx-accent, #f4f4f5); } .nrx-filterp-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--nrx-ui-label-size, 12px); font-weight: var(--nrx-ui-label-weight, 600); color: var(--nrx-ui-label-ink, #dedfe2); text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } .nrx-filterp-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .nrx-filterp-switch-ui { flex: none; width: 32px; height: 18px; border-radius: 999px; background: #3d3d3d; position: relative; transition: background .12s ease; } .nrx-filterp-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #f5f5f5; transition: transform .12s ease; } .nrx-filterp-switch input:checked + .nrx-filterp-switch-ui { background: var(--nrx-accent, #f4f4f5); } .nrx-filterp-switch input:checked + .nrx-filterp-switch-ui::after { transform: translateX(14px); } .nrx-filterp-switch input:focus-visible + .nrx-filterp-switch-ui { outline: 2px solid #fff; outline-offset: 2px; } .nrx-filterp-seg { display: flex; gap: 6px; } /* This pane got here first: opaque dark chips with light type on them, which is why it was the one overlay that never washed out over a bright billboard. It now reads that ground from the shared tokens instead of its own hexes, so the player overlay and this one are the same control rather than two that happen to look alike. */ .nrx-filterp-segbtn, .nrx-filterp-genre, .nrx-filterp-btn, .nrx-filterp-clear { margin: 0; padding: 4px 10px; border: 1px solid var(--nrx-ctl-line, rgba(255, 255, 255, 0.26)); border-radius: 999px; background: var(--nrx-ctl-bg, rgba(18, 18, 20, 0.78)); color: var(--nrx-ctl-ink, #f2f2f3); font: inherit; font-size: var(--nrx-ctl-size, 12.5px); font-weight: var(--nrx-ctl-weight, 600); line-height: 1.3; cursor: pointer; } .nrx-filterp-segbtn { flex: 1; text-align: center; } /* Denser than the other pills, because there are 27 of them and they are all on screen at once. 11px with tighter padding puts the set at about five rows — less height than the scroller it replaced was costing once its scrollbar, its edge fades and its sliver of next row were counted. */ /* The one deliberate exception to the shared control size: there are 27 of these and they are all on screen at once, so they run a notch smaller than every other chip. A notch — not the two notches they were at, which is what made them the hardest thing in the product to read over a bright frame. */ .nrx-filterp-genre { padding: 3px 8px; font-size: var(--nrx-type-meta, 11.5px); font-weight: 600; } /* The chosen ones are the exception: they carry the weight, so a selection reads at a glance across five rows of otherwise even text. */ .nrx-filterp-genre[aria-pressed="true"] { font-weight: 700; } .nrx-filterp-segbtn:hover, .nrx-filterp-genre:hover, .nrx-filterp-btn:hover, .nrx-filterp-clear:hover { background: var(--nrx-ctl-bg-hi, rgba(44, 45, 49, 0.86)); border-color: var(--nrx-ctl-line-hi, rgba(255, 255, 255, 0.44)); } .nrx-filterp-segbtn[aria-pressed="true"], .nrx-filterp-genre[aria-pressed="true"] { background: var(--nrx-accent, #f4f4f5); border-color: var(--nrx-accent, #f4f4f5); color: var(--nrx-accent-ink, #0e0e0f); } .nrx-filterp-segbtn:focus-visible, .nrx-filterp-genre:focus-visible, .nrx-filterp-btn:focus-visible, .nrx-filterp-clear:focus-visible, .nrx-filterp-x:focus-visible, .nrx-filterp-range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Bounded, and scrolls. 27 chips wrap to five or six rows, which was fine in a dialog that covered the page and is not fine in a pane that is always on screen — it was the tallest thing in the overlay by a factor of three. Three rows are visible and the rest scrolls, so the panel has a predictable height whatever is chosen. overscroll-behavior stops a flick inside the chips from scrolling the Netflix grid behind the pane once it reaches the end. */ /* All 27, wrapping, and now capped in height rather than uncapped. The earlier note here argued the other way: five dense rows cost less than a scroller plus its scrollbar, fades and the sliver of next row. That was true as an isolated comparison and wrong as a whole-panel one — those five rows were the single largest block in the pane, and the pane is not a page. It floats over the artwork someone is trying to look at, so its height is the thing being spent, and this block was spending a third of it on a list most people set once. Three rows and a scroll. Nothing is hidden behind a click and nothing moved into a popup, which is what was actually being defended; the list simply stops at a height a floating panel can afford. The mask leaves the last row half-lit, which is what says "there is more" without a scrollbar having to. */ .nrx-filterp-genres { display: flex; flex-wrap: wrap; gap: 4px; max-height: 5.9em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; /* A fade at the bottom edge only — the top is flush with its label, and a fade there would read as the label being cut off. */ -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); } /* Scrolled to the end there is nothing below, so the fade would be lying. */ .nrx-filterp-genres[data-end="yes"] { -webkit-mask-image: none; mask-image: none; } /* The dimmed count, where the bottom-left bar's readout went. */ .nrx-filterp-count-text { flex: 1; color: var(--nrx-ui-label-ink, #eff0f3); font-size: var(--nrx-ui-label-size, 12px); font-variant-numeric: tabular-nums; text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } .nrx-filterp-count-text[data-on="yes"] { color: var(--nrx-accent, #f4f4f5); } /* The count beside "Genres", on its own class. It was written as `.nrx-filterp-rowhead .nrx-filterp-val[data-on="no"]`, which matched every value in every row head — so the rating and the length both went invisible the moment their own filter was off, which is exactly when you most need to see what they are set to. */ .nrx-filterp-count { font-variant-numeric: tabular-nums; color: var(--nrx-accent, #f4f4f5); } .nrx-filterp-count[data-on="no"] { opacity: 0; } /* The category select is one row by design — 184 options that cost the height of a single control, drawn by the browser so nothing can clip the list. */ .nrx-filterp-select { width: 100%; box-sizing: border-box; font-size: var(--nrx-ctl-size, 12.5px); } .nrx-filterp-clear { padding: 3px 9px; font-size: var(--nrx-type-meta, 11.5px); } /* On/off, the count it governs, and the way out — one line, in reading order. The switch used to live on a line of its own inside the rating row, which cost the panel a whole row and implied it toggled the rating alone. */ .nrx-filterp-actions { display: flex; align-items: center; gap: 10px; padding-top: 1px; } @media (prefers-reduced-motion: reduce) { .nrx-filterp-switch-ui, .nrx-filterp-switch-ui::after { transition: none; } } /* Below this the panel is close to the window's width, so it stops pretending to be a corner element — the same move the bar makes at the same breakpoint. */ @media (max-width: 720px) { .nrx-filterp { left: 12px; right: 12px; bottom: 84px; width: auto; max-height: 66vh; } } /* The live region. Off-screen rather than hidden: `display: none` and the `hidden` attribute both take a live region out of the accessibility tree, and one nobody can reach announces nothing. It used to live in the bottom-left status bar, which was styled and never built — so every announcement this file made went to an element that did not exist. Moving it into the panel is what made the announcements real. */ .nrx-filterp-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }