/* The badge sits on top of the site's own artwork, so everything here is defensive: high z-index, no pointer events (never steal a click from a hover preview), and a dark plate so it stays readable over whatever the poster happens to look like. Top-RIGHT is deliberate, and both sites the extension runs on agree on it. Netflix puts its TOP 10 ribbon in the top-left corner and its "New Season" / "Recently added" tags in the bottom-left; Prime Video's own hover overlays also sit top-left. The right side is the corner nobody else wants. Nothing below is measured against a particular tile size, which is what lets Prime's wider packshot take the same badge unchanged — the badge is pinned to a corner and sized by its own text, never by its host. */ /* Only ever adds a positioning context where the host lacks one: Netflix's grid tiles are position:static and need it, while Prime's packshot is already relative, so this restates what it has rather than overriding it. */ .nrx-host { position: relative; } .nrx-badge { position: absolute; top: 6px; right: 6px; z-index: 5; padding: 2px 7px; border-radius: 4px; font-family: var(--nrx-font); font-size: var(--nrx-ui-label-size, 12px); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.82); /* A NEUTRAL hairline, not currentColor. The number is the rating; the plate around it is chrome, and chrome is monochrome throughout this product. A tier-coloured border doubles the coloured area for no extra information — the score is already saying it — and on a wall of tiles that reads as coloured boxes rather than as coloured scores, which is the opposite of scannable. See BRAND.md §5. */ border: 1px solid rgba(255, 255, 255, 0.22); box-sizing: border-box; /* The badge must take pointer events or it can never be hovered — the tooltip below depends on it. It sits inside the card's own anchor, so a hover still counts as hovering the card and Netflix's preview is unaffected, and a plain click still falls through to the card. Only the modifier chord is intercepted; see linkToImdb() in content.js. */ pointer-events: auto; user-select: none; cursor: default; } /* Only a badge that resolved to an IMDb id is worth clicking, and data-imdb-id is set exactly then — so the pointer never promises a link that isn't there. A grey "—" badge keeps the default cursor. */ .nrx-badge[data-imdb-id] { cursor: pointer; } /* :focus-visible rather than :focus, so the ring appears for the keyboard user who tabbed here and not for the mouse user who just clicked. White to match the focus ring Netflix draws on its own controls, offset so it reads clearly against artwork of any colour. */ .nrx-badge[data-imdb-id]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Our own tooltip rather than a native title attribute. Native tooltips wait about a second, by which time Netflix has expanded the card out from under the cursor. This one appears instantly and is rendered to with a fixed position, so Netflix's overlays can't clip or cover it. */ .nrx-tip { position: fixed; z-index: 2147483647; max-width: 260px; padding: 7px 10px; border-radius: 5px; background: #000; box-shadow: 0 4px 14px rgba(0, 0, 0, .6), inset 0 0 0 1px #333; color: #f2f2f2; font-family: var(--nrx-font); font-size: var(--nrx-ui-label-size, 12px); line-height: 1.45; white-space: pre-line; pointer-events: none; } .nrx-tip[hidden] { display: none; } .nrx-tip b { font-weight: 700; font-variant-numeric: tabular-nums; } .nrx-tip .nrx-alias { color: var(--nrx-text-2, #9b9ca0); } /* A dashed outline means the rating rests on very few votes — an 8.9 from 74 people should not look like an 8.7 from 2.3 million. In practice it also catches bad matches: a famous series showing 90 votes has resolved to the wrong entry, and the dash is the tell. */ /* Which corner is free depends on the platform: Netflix keeps its TOP 10 ribbon top-left, Prime puts "NEW MOVIE" and "TRENDING" top-right. Both measured on the live sites — the badge collided in each case. */ .nrx-badge[data-corner="left"] { left: 6px; right: auto; } .nrx-badge[data-confidence="low"] { border-style: dashed; opacity: 0.85; } /* The other end of the same fact: strongly rated, but on few enough votes that nobody has heard of it. Same attribute as the dash, so a badge can never wear both — see applyConfidence() in content.js. A halo rather than a shape or a glyph, because this is a nudge and the honest confidence behind it is moderate: an under-seen gem and a plausible wrong match look identical in the data, and a mark that can be wrong should not be a rosette. White rather than currentColor, for the same reason the border is: the glow is a lift, not a second opinion about the score, and colour on this product only ever states a rating. Brightness carries it perfectly well. */ .nrx-badge[data-confidence="gem"] { box-shadow: 0 0 7px rgba(255, 255, 255, 0.55); } /* The best-rated card in a row. A pseudo-element, so the mark costs the card no extra node: nothing new to intercept a click or sit between Netflix and its own hover preview, and it inherits the badge's visibility so Shift+B takes it away with everything else. An underline, because the badge is already the thing being talked about and this is emphasis on it rather than a second signal beside it. Drawn just outside the plate so it never crowds the number. White, not the badge's own colour: "best in this row" is a position, not a rating, and it must not be mistaken for one — a red badge can still be the best thing in a bad row. */ .nrx-badge[data-best]::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -3px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.85); pointer-events: none; } /* Colour is the whole point: you should be able to scan a row without reading a single number. */ .nrx-badge[data-tier="high"] { color: var(--nrx-green, #46d369); } /* worth it */ .nrx-badge[data-tier="mid"] { color: var(--nrx-amber, #e5a00d); } /* maybe */ .nrx-badge[data-tier="low"] { color: var(--nrx-red, #e87c78); } /* skip */ .nrx-badge[data-tier="unknown"] { color: var(--nrx-grey, #8c8c8c); } /* no rating found */ /* --- the "dim what I'd skip" filter --------------------------------------- Applied to the card itself, not the badge — the point is to push the whole tile back, not just relabel it. Opacity and saturation only: never pointer-events, display or visibility, so Netflix's own hover preview and click handling on the card underneath are untouched. Hovering lifts the dim back to full brightness. That's deliberate — a user who points at a dimmed card has already overridden the filter's guess, and should see it exactly as if the filter were off. */ .nrx-dimmed { opacity: 0.35; filter: saturate(0.6); transition: opacity 0.15s ease, filter 0.15s ease; } .nrx-dimmed:hover { opacity: 1; filter: none; } /* --- the rating inside Netflix's hover preview --------------------------- Netflix replaces the card with a mini-player on hover, taking the badge with it, so the rating is restated in the preview's own metadata row alongside the maturity rating and season count. Styled to sit in that row as though it belonged there, because visually it does. */ .nrx-chip { display: inline-flex; align-items: baseline; margin-right: 8px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 3px; font-size: 0.85em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; } .nrx-chip[data-confidence="low"] { border-style: dashed; } .nrx-chip[data-tier="high"] { color: var(--nrx-green, #46d369); } .nrx-chip[data-tier="mid"] { color: var(--nrx-amber, #e5a00d); } .nrx-chip[data-tier="low"] { color: var(--nrx-red, #e87c78); } .nrx-chip[data-tier="unknown"] { color: var(--nrx-grey, #8c8c8c); } /* The IMDb title, when it differs from the name Netflix shows. Muted so it reads as a footnote rather than competing with the score. */ .nrx-chip-alias { margin-left: 5px; color: #9a9a9a; font-weight: 400; } /* "ended 2019" / "still running". Same muted key as the alias: it answers a question the rating doesn't, but it is context rather than a verdict, and the score has to stay the thing the eye lands on. */ .nrx-chip-status { margin-left: 5px; color: #9a9a9a; font-weight: 400; } /* --- Shift+B: get out of the way ----------------------------------------- Sometimes you just want to look at the artwork. visibility, not display: collapsing the chip would reflow Netflix's metadata row, and visibility also takes the badge out of hover and focus for free, so nothing hidden can still be tooltipped or tabbed to. The card itself is untouched — no pointer-events, nothing — so Netflix's hover preview and click handling carry on exactly as they do with the badges showing. The chip goes with the badges deliberately: "hidden" should mean hidden everywhere, not something that depends on which surface you are looking at. It leaves its space behind rather than collapsing, since that would shuffle the modal's synopsis up mid-fade, and a held gap is cheaper than a jump. Scoped to :root. so it outranks the [data-confidence="low"] opacity above, which would otherwise tie and win on source order. */ :root.nrx-badges-hidden .nrx-badge, :root.nrx-badges-hidden .nrx-chip { opacity: 0; visibility: hidden; } /* A fade rather than a blink, and the visibility transition is what delays the flip to hidden until the fade has finished. */ .nrx-badge, .nrx-chip { transition: opacity 0.12s ease, visibility 0.12s; } @media (prefers-reduced-motion: reduce) { .nrx-badge, .nrx-chip { transition: none; } } /* --- badges turned off in settings ---------------------------------------- A class on , written by glass.js, rather than content.js not drawing them. The distinction is the whole design of these switches: content.js must go on reading and storing every card it sees, because the dim filter, the grid sort and the picker are all built on what it finds. A switch that quietly emptied the catalogue would be doing something other than what it says on the label. So this is visual and nothing else. The badge is still in the DOM, still carries its dataset, and everything that reads it keeps working — it is simply not painted. It is also hidden from assistive technology, because a badge nobody can see should not be a badge somebody hears. Attribute selector rather than a class, so it cannot collide with anything a streaming site puts on its own . */ html[data-nrx-nobadges] .nrx-badge { display: none !important; }