/* The player features' only two pieces of chrome: a speed/seek toast and a local subtitle blackout. Everything here is prefixed nrx-player- so it cannot reach a badge, the sort bar, the genre picker or the subtitle styling — content.css, sort.css, genres.css and subtitles.css own those, and this file is not allowed to have an opinion about them. Everything here sits over a full-bleed video rather than over Netflix's layout, which changes what legibility costs: there is no guaranteed background colour behind any of it, because the frame underneath can be a white wall or a night exterior. The toast answers that with a near-opaque plate. The overlay used to as well, and no longer does — its solidity is a setting now — so it answers it with a backdrop blur instead: the frame still shows through, but not in focus and not at full contrast, which is what keeps the labels readable at the translucent end of the range. */ /* --- the toast ------------------------------------------------------------- Position fixed rather than absolute, and re-parented in JS into whatever the fullscreen element currently is. Fullscreen is why: a fixed element that is not a descendant of the fullscreen node is not painted at all, so the parent has to move even though the coordinates do not. Top-centre, clear of Netflix's own furniture — the back arrow is top-left, the title card top-centre but only on the first few seconds, the control bar and the scrubber are along the bottom, and the skip button sits bottom-right. Above 2147483000, matching content.css's tooltip, because Netflix's player chrome climbs to around 1000 and a speed indicator hidden behind the scrubber is not an indicator. */ .nrx-player-toast { position: fixed; top: 12%; left: 50%; transform: translateX(-50%); z-index: 2147483000; /* Netflix's reset never reached an element it did not render, so this starts from the UA default and is talked all the way down. */ margin: 0; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; background: rgba(20, 20, 20, 0.92); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); color: #f2f2f2; font-family: var(--nrx-font); font-size: var(--nrx-type-display, 20px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; /* Never in the way of a click. The toast lives directly over the video, and the one thing worse than missing the speed indicator is having it swallow a play/pause. */ pointer-events: none; user-select: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s; } .nrx-player-toast--on { opacity: 1; visibility: visible; } /* --- the subtitle blackout ------------------------------------------------- `c` hides the cues Netflix has already drawn. It does not change the track Netflix has selected — that would mean driving Netflix's own menu and writing the choice back to the account, which this extension does not do. !important is load-bearing here rather than lazy, and this is one of the two places the house style allows it: Netflix positions and sizes the timed-text layer with inline styles, so an ordinary rule loses to the style attribute every time. The class is only ever on while the user has asked for this, so nothing is being permanently overridden. Both hooks are listed because they are the same layer under two names — the long-standing class, and the data-uia in case the class is next to be replaced by a CSS-in-JS hash. */ html.nrx-player-subs-off .player-timedtext, html.nrx-player-subs-off [data-uia="player-timedtext"] { display: none !important; } /* A toast that fades is decoration; a toast that appears is information. Under a reduced-motion preference it keeps the second and drops the first. */ @media (prefers-reduced-motion: reduce) { .nrx-player-toast { transition: none; } } /* --- the on-player overlay -------------------------------------------------- Top-right, because Netflix's own controls are the bottom bar and the back arrow at top-left, and a control that overlaps the scrubber is a control that gets pressed by accident. The container takes no pointer events and the chips hand them back. Without that, the empty space beside a short row would swallow clicks meant for the video underneath — the same arrangement the browse launcher uses, and for the same reason. */ .nrx-player { position: absolute; /* The resting corner. player.js overwrites both of these with pixel offsets from the stored position as soon as it places the panel, and sets `right: auto` when it does — these are the values that hold for the one frame before that, and after a build where the placement never runs. */ top: 16px; right: 16px; z-index: 2147482500; /* Draggable, so the panel says so before it is touched. The controls inside take their own cursor back. */ cursor: grab; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px; /* The surface — the frost, the fill, the lit edge and the solidity property — is glass.css's, worn by adding `nrx-glass` in player.js. It used to be declared here, and the browse launcher needed the same thing; a second copy is how two panels stop matching. What is left in this file is this panel's layout and nothing else. */ color: #f5f5f5; font-family: var(--nrx-font); font-size: var(--nrx-ctl-size, 12.5px); line-height: 1.3; text-align: left; pointer-events: none; /* Hidden by default and shown on movement, like Netflix's own controls. Not display:none — the fade is what stops it snapping in and out of a picture someone is watching. Asymmetric on purpose, and the asymmetry is the whole point of the timing: appearing is a response to the user's hand and has to feel immediate, so 140ms with an ease-out that front-loads the movement. Leaving is not a response to anything — the user has stopped moving — so it takes 420ms and drifts up slightly on the way out, which reads as the overlay withdrawing rather than as a frame dropping. Both are transform and opacity only, so the whole thing composites and never touches layout. visibility is stepped rather than eased and is what actually removes it from the hit-testing and the tab order at the end of the fade; it carries the same duration as the opacity so it flips only once the plate is gone. */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .42s ease, transform .42s ease, visibility .42s; } .nrx-player[data-show="yes"] { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .14s cubic-bezier(.2, .8, .3, 1), transform .14s cubic-bezier(.2, .8, .3, 1), visibility .14s; } .nrx-player > * { pointer-events: auto; } /* The panel takes pointer events only while it can be grabbed — otherwise the padding around the controls would swallow clicks meant for the video. That is the arrangement the launcher uses; dragging is why this one differs. */ /* The panel takes pointer events itself, unlike the pre-drag version: a drag has to start somewhere that is not a control. The cursors and the no-transition-while-dragging rule are glass.css's, keyed on the data attributes glass.js writes. */ .nrx-player { pointer-events: auto; } .nrx-player-row { display: flex; align-items: center; gap: 6px; } /* The text on a plate whose background is the film. * * Solving the chips by making them opaque left the labels behind, and the * bright-frame case showed it: the plate is 45% fill over a backdrop blur, so * over a snow scene it lifts to near-white and #b3b3b3 text on it is gone. * There is no single grey that works, because the ground moves. * * So: brighter type, plus a dark shadow tight enough to read as an edge rather * than a glow. On a dark frame the shadow is invisible and the type carries * itself; on a bright one the shadow is what separates the two. It is the same * thing Netflix does to its own subtitles for the same reason, and the same * reason .tile-title on the website has one. */ /* Both of these are now defined once, in glass.css, off the tokens every overlay shares — so the player, the launcher and the filter pane cannot drift apart again the way they had. What is left here is the one thing that is genuinely this panel's: the label column is wider, because "Position" is the longest label in the product. */ .nrx-player-label { min-width: 62px; } /* --- the subtitle group ---------------------------------------------------- Font, Size and Position are three settings for one thing. As five flat sibling rows they read as five unrelated controls — and "Size", sitting between a row labelled Subtitles and one labelled Position, could as easily have been the size of the panel itself. The grouping is carried by a rule down the left edge rather than by spacing alone. Spacing says "these are nearer each other"; a line says "these are one thing", and on a panel this small the difference between the two gaps would be about four pixels. */ .nrx-player-group { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding: 6px 0 2px 9px; /* Mid-grey, not white. A white hairline is invisible on a plate sitting over a bright frame and a dark one is invisible over a dark frame; a grey near the middle is darker than the light case and lighter than the dark case, so it is the one value that survives both. The ground moves; the rule cannot. */ border-left: 1px solid rgba(150, 152, 158, 0.5); } /* The heading sits in the label column, so it lines up with Speed and Skip above it and reads as the same rank of thing — which it is. Uppercase and tracked, because it names a section rather than labelling a control, and at this size that is the only difference available. */ .nrx-player-grouphead { color: var(--nrx-ui-section-ink, #c8c9cd); font-size: var(--nrx-ui-section-size, 10.5px); font-weight: var(--nrx-ui-section-weight, 700); letter-spacing: .1em; text-transform: uppercase; text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6)); } /* Inside the group the rule already carries 9px of indent, so the label column gives that back — otherwise the group's controls would sit further right than everything above them and the indent would read as an accident. */ .nrx-player-group .nrx-player-label { min-width: 53px; } /* A tick on the switches, and only on the switches. Speed is a choice between alternatives — exactly one chip is filled and the fill means "this one". Skip is three independent switches, and there the same fill means "on", which is a different claim. The rows look identical, so the fill alone cannot carry both meanings; the tick is what separates them. It is also the redundancy that makes the state readable without relying on the fill at all, which matters on a panel floating over arbitrary video. */ .nrx-player-chip[data-toggle="yes"][aria-pressed="true"]::before { content: "\2713"; margin-right: 4px; font-size: 10px; font-weight: 700; } /* The overlay appearing is information; the way it slides is decoration. Under a reduced-motion preference the movement goes and the fade stays, since an overlay that simply blinks in and out over a film is its own kind of unpleasant. The transform is reset so it cannot be left parked 6px high. */ @media (prefers-reduced-motion: reduce) { .nrx-player, .nrx-player[data-show="yes"] { transform: none; transition: opacity .12s linear, visibility .12s; } .nrx-player-chip { transition: none; } }