e4d50f047c
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 42s
Two things set the rhythm, and neither is a row counter — that beats like a metronome. It comes due on a count of *cards*: a block is a set of stories and a hero is one story however many cells it takes, so a stretch thick with big footprints reaches the count over more rows than a stretch of squares does, and block heights end up tracking the size mix (measured: four to five rows through square-heavy runs, six to seven where art clusters). And the break *makes* its own section front rather than waiting for one, promoting the card that opens a new block to a hero. Waiting was the first attempt and it failed on the numbers — a banner lands at the start of a row on its own two to five times in thirty-six, so the preference almost never fired and a max-rows cap did all the work. Promotion always fits, since a break only falls on a row with all four cells free. A tail guard keeps the last cut from leaving a rule with a fragment under it. The break sits between two grids rather than inside one: a grid item would be stretched to the 9rem row track, and out here its height is its own, down to nothing. Three custom properties are the whole contract a theme writes against — the air around it, the rule through it, an optional glyph centred on that rule — with `none` on the last two meaning the real absence of each, so a theme can remove the separation entirely rather than leave an empty band. Themes wanting something a rule can't be reach past the properties to plain CSS: nyt pairs hairlines in the grid's own pen and clips them to the art inset (which moves up to the feed, since a property on the grid can't reach a sibling); brutalist spends air around the 2px border it already divides everything else with; kanagawa takes a comment divider, geocities the rainbow its header ends on, melange a thinner band of the mélange. The page gutter moves to a feed wrapper so every block lines up on the same edges, and nyt's masking frame now runs once per block, which is what makes each of them read frameless and not just the feed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
520 lines
19 KiB
CSS
520 lines
19 KiB
CSS
/* ══════════════════════════════════════════════════════════════════════
|
|
"Old Grey Lady" theme — New York Times editorial styling.
|
|
Serif typography, paper-and-ink palette, hairline rules, sharp corners,
|
|
restrained NYT-blue links, inverted ink-on-paper primary buttons.
|
|
|
|
Light scheme → newsprint (white page, black ink).
|
|
Dark scheme → NYT night mode (near-black page, warm-grey ink).
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
|
|
:root[data-style="nyt"] {
|
|
/* Square corners everywhere App.css uses the radius scale. */
|
|
--radius-xs: 0;
|
|
--radius-sm: 0;
|
|
--radius-md: 0;
|
|
--radius-lg: 0;
|
|
--radius-xl: 0;
|
|
--radius-full: 0;
|
|
|
|
/* Hairlines, not strokes — controls match the rules between stories. */
|
|
--border-width: 1px;
|
|
|
|
/* Instrument Serif is a condensed display face: at the shared scale its
|
|
small sizes read a step smaller than other themes', so lift the low end. */
|
|
--text-2xs: 0.78rem;
|
|
--text-xs: 0.86rem;
|
|
--text-sm: 0.94rem;
|
|
--text-md: 1rem;
|
|
--text-base: 1.06rem;
|
|
--text-lg: 1.2rem;
|
|
|
|
--color-text: light-dark(#121212, #e6e6e6);
|
|
--color-text-secondary: light-dark(#5a5a5a, #ababab);
|
|
--color-text-muted: light-dark(#767676, #8a8a8a);
|
|
--color-on-accent: light-dark(#ffffff, #121212);
|
|
--color-bg: light-dark(#ffffff, #121212);
|
|
--color-surface: light-dark(#ffffff, #1e1e1e);
|
|
--color-border: light-dark(#e2e2e2, #3a3a3a);
|
|
--color-border-subtle: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
|
|
--color-accent: light-dark(#121212, #ececec);
|
|
--color-accent-hover: light-dark(#000000, #ffffff);
|
|
--color-link: light-dark(#1a1a1a, #ececec);
|
|
--color-link-hover: light-dark(#000000, #ffffff);
|
|
--color-danger: light-dark(#b10000, #ff6b6b);
|
|
--color-danger-bg: light-dark(#fdecec, #2a1414);
|
|
--color-danger-hover: light-dark(#8a0000, #ff9a9a);
|
|
--color-success: light-dark(#1a7f37, #6cc070);
|
|
--color-success-bg: light-dark(#e6f4ea, #122a14);
|
|
--color-success-hover: light-dark(#136a2c, #95d699);
|
|
--color-overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
|
|
--color-header-user-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
|
|
--color-header-user-bg-hover: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12));
|
|
--color-option-bg: light-dark(#f2f2f2, #181818);
|
|
--color-option-border: light-dark(#e2e2e2, #3a3a3a);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════
|
|
Structural overrides
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Typography — one serif everywhere ───────────────────────────── */
|
|
[data-style="nyt"] {
|
|
--font-body: "Instrument Serif", Georgia, "Times New Roman", serif;
|
|
--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
|
|
font-family: var(--font-body);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
/* Single weight, no small caps: never let the browser fake either — a
|
|
smeared faux bold or spindly faux small caps give the typeface away.
|
|
Hierarchy comes from size, italics and capitals instead. */
|
|
font-synthesis: none;
|
|
}
|
|
|
|
/* This theme squares everything off — opt the FAB into a square too (it keeps
|
|
its animations; only the corners change). */
|
|
[data-style="nyt"] .dump-fab,
|
|
[data-style="nyt"] .chat-fab {
|
|
--fab-radius: 0;
|
|
}
|
|
|
|
/* ── Headlines — display serif ───────────────────────────────────── */
|
|
[data-style="nyt"] h1,
|
|
[data-style="nyt"] .app-header-brand,
|
|
[data-style="nyt"] .dump-title,
|
|
[data-style="nyt"] .dump-card-title,
|
|
[data-style="nyt"] .playlist-card-title,
|
|
[data-style="nyt"] .journal-card-title,
|
|
[data-style="nyt"] .playlist-detail-title,
|
|
[data-style="nyt"] .form-page-title,
|
|
[data-style="nyt"] .auth-card-title,
|
|
[data-style="nyt"] .profile-subpage-title,
|
|
[data-style="nyt"] .notifications-title,
|
|
[data-style="nyt"] .dump-create-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400; /* Instrument Serif is single-weight; size carries it */
|
|
letter-spacing: 0;
|
|
line-height: 1.14;
|
|
}
|
|
|
|
/* A confident broadsheet type scale */
|
|
[data-style="nyt"] .app-header-brand {
|
|
font-size: 1.45rem;
|
|
letter-spacing: 0;
|
|
}
|
|
[data-style="nyt"] .dump-title {
|
|
font-size: 2.1rem;
|
|
}
|
|
[data-style="nyt"] .playlist-detail-title {
|
|
font-size: 1.9rem;
|
|
}
|
|
[data-style="nyt"] .dump-card-title,
|
|
[data-style="nyt"] .playlist-card-title {
|
|
font-size: 1.2rem;
|
|
line-height: 1.2;
|
|
}
|
|
[data-style="nyt"] .journal-card-title {
|
|
font-size: 1.15rem;
|
|
line-height: 1.18;
|
|
}
|
|
[data-style="nyt"] .journal-card--feature .journal-card-title {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/* Headline links underline on hover (ink stays ink). */
|
|
[data-style="nyt"] .dump-card-inner:hover .dump-card-title,
|
|
[data-style="nyt"] .playlist-card-inner:hover .playlist-card-title,
|
|
[data-style="nyt"] .journal-card-title:hover {
|
|
color: var(--color-text);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
/* …except over a photo, where the headline is white on a dark scrim: ink
|
|
there goes black-on-black in the light scheme. */
|
|
[data-style="nyt"] .journal-card--image .journal-card-title:hover {
|
|
color: #fff;
|
|
}
|
|
/* Over a playable thumb the card's "open" cue stands down (see App.css). */
|
|
[data-style="nyt"]
|
|
.dump-card-inner:has(.dump-card-preview :is(button, a):hover)
|
|
.dump-card-title {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Kickers — section labels & badges in spaced capitals ───────── */
|
|
[data-style="nyt"] .comment-section-title,
|
|
[data-style="nyt"] .related-section-title,
|
|
[data-style="nyt"] .form-page-eyebrow,
|
|
[data-style="nyt"] .playlist-badge,
|
|
[data-style="nyt"] .dump-card-private-badge,
|
|
[data-style="nyt"] .notif-group-label,
|
|
[data-style="nyt"] .follow-btn {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── Datelines — the serif's real italic, in muted ink ────────────── */
|
|
[data-style="nyt"] .dump-card-date,
|
|
[data-style="nyt"] .journal-card-meta,
|
|
[data-style="nyt"] .comment-time,
|
|
[data-style="nyt"] .notification-time,
|
|
[data-style="nyt"] .dump-edited-label {
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Lead note — a standfirst with an editorial drop cap ─────────── */
|
|
[data-style="nyt"] .dump-comment {
|
|
border-left: none;
|
|
padding: 0;
|
|
margin: 0.35rem 0 0;
|
|
opacity: 1;
|
|
color: var(--color-text-secondary);
|
|
font-size: 1.2rem;
|
|
line-height: 1.6;
|
|
}
|
|
[data-style="nyt"] .dump-comment p:first-of-type::first-letter {
|
|
float: left;
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: 3.4rem;
|
|
line-height: 0.78;
|
|
padding: 0.12em 0.14em 0 0;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* ── Generous editorial leading for the lead note; comments stay tight ── */
|
|
[data-style="nyt"] .dump-comment,
|
|
[data-style="nyt"] .dump-comment p {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Tight, ruled comment thread — small padding, snug leading, no extra gaps. */
|
|
[data-style="nyt"] .comment-body {
|
|
line-height: 1.45;
|
|
}
|
|
[data-style="nyt"] .comment-node-inner {
|
|
padding: 0.5rem 0;
|
|
gap: 0.6rem;
|
|
}
|
|
[data-style="nyt"] .comment-meta {
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
[data-style="nyt"] .comment-list,
|
|
[data-style="nyt"] .comment-replies {
|
|
gap: 0;
|
|
}
|
|
|
|
/* ── Content isn't boxed — it sits on the page, divided by hairline
|
|
rules (à la nytimes.com). No surface fill, no card shadow. ─────────── */
|
|
[data-style="nyt"] .dump-card,
|
|
[data-style="nyt"] .playlist-card,
|
|
[data-style="nyt"] .user-result-item,
|
|
[data-style="nyt"] .comment-node-inner {
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* The dump detail is a single article, not a list — no dividing rules. */
|
|
[data-style="nyt"] .dump-post-header,
|
|
[data-style="nyt"] .dump-rich-content {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Notifications keep their left bar (the unread indicator), lose the box. */
|
|
[data-style="nyt"] .notification-item {
|
|
border: none;
|
|
border-left: 3px solid transparent;
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* No box-hover; the headline underline is the affordance. */
|
|
[data-style="nyt"] .dump-card:hover,
|
|
[data-style="nyt"] .playlist-card:hover,
|
|
[data-style="nyt"] .user-result-item:hover {
|
|
background: transparent;
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* Genuine containers (forms, embeds, the compose box) keep a hairline box. */
|
|
[data-style="nyt"] .auth-card,
|
|
[data-style="nyt"] .comment-top-form,
|
|
[data-style="nyt"] .rich-content-card {
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Journal view: a section-front grid of stories divided by hairline rules,
|
|
not boxed cards. Close the gaps and rule each cell on its top & left edge so
|
|
the rules read as continuous row + column delimiters (à la nytimes.com).
|
|
The outermost rules are masked off (below) so there's no frame around the
|
|
block — CSS grid can't target a first column or a last row, hence the mask. */
|
|
|
|
/* How far a photo holds off the rules. It sits on the feed rather than on the
|
|
grid because the break between two grids is cut to the same measure, and a
|
|
property declared on the grid wouldn't reach it. */
|
|
[data-style="nyt"] .journal-feed {
|
|
--journal-art-inset: 0.55rem;
|
|
}
|
|
[data-style="nyt"] .journal-grid {
|
|
gap: 0;
|
|
position: relative;
|
|
}
|
|
[data-style="nyt"] .journal-card {
|
|
background: transparent;
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Rules run to the edges of their cell, but a photo holds off them by
|
|
--journal-art-inset. Between two cells the overshoot meets the neighbour's
|
|
and the pair reads as one continuous rule; around the outside of the block
|
|
there is no neighbour, so each one ends as a tick sticking out past the art
|
|
— above and below it at the top and bottom of the grid, past its sides at
|
|
the left and right.
|
|
|
|
One page-coloured frame, laid over the grid's own edge and as thick as that
|
|
inset, cuts all of them back to the art at once. It takes the outer rules
|
|
(the first row's top, the first column's left) with it, which is the same
|
|
frameless block the two strips it replaces were after. One frame per grid
|
|
means one per sub-block, so every block reads frameless, not just the feed. */
|
|
[data-style="nyt"] .journal-grid::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border: var(--journal-art-inset) solid var(--color-bg);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* A section front changes section on a rule, not an ornament — and here on a
|
|
double one, the paired hairline a paper sets above a new section. Both
|
|
lines are the grid's own rule colour and weight, so the break reads as the
|
|
same pen that divides the cells, used twice. It needs less air than the
|
|
base break asks for: each block already ends and begins on the
|
|
page-coloured frame, which is holding its own rules back by the art inset. */
|
|
[data-style="nyt"] .journal-break {
|
|
--journal-break-space: 1rem;
|
|
--journal-break-rule: 1px solid var(--color-border);
|
|
height: 3px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
/* Stop where the art stops. The frame above holds the grid's own rules
|
|
back by the inset, so a full-width break would overshoot the pictures
|
|
it divides by exactly that much on each side. */
|
|
margin: var(--journal-break-space) var(--journal-art-inset);
|
|
}
|
|
[data-style="nyt"] .journal-card:hover {
|
|
border-color: var(--color-border);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Inset content from the rules so the grid breathes — photos get a margin
|
|
frame, text stories sit a little further off the lines. */
|
|
[data-style="nyt"] .journal-card--image {
|
|
padding: 0.55rem;
|
|
}
|
|
[data-style="nyt"] .journal-card--image .journal-card-image {
|
|
inset: 0.55rem;
|
|
}
|
|
[data-style="nyt"] .journal-card--quote,
|
|
[data-style="nyt"] .journal-card--text {
|
|
--journal-quote-pad: 1.05rem;
|
|
padding: var(--journal-quote-pad);
|
|
}
|
|
|
|
/* ── App header — crisp masthead rule ────────────────────────────── */
|
|
[data-style="nyt"] .app-header {
|
|
border-bottom: 2px solid var(--color-text);
|
|
}
|
|
|
|
[data-style="nyt"] .header-search-below {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
|
|
/* ── Primary button — inverted ink-on-paper (auto-flips per scheme) ─ */
|
|
[data-style="nyt"] .btn-primary {
|
|
background: var(--color-text);
|
|
color: var(--color-bg);
|
|
border: 1px solid var(--color-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-style="nyt"] .btn-primary:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Secondary / outline buttons — plain hairline box */
|
|
|
|
/* ── Inputs — clean field, ink focus ─────────────────────────────── */
|
|
[data-style="nyt"] .form input:focus,
|
|
[data-style="nyt"] .form textarea:focus,
|
|
[data-style="nyt"] .mention-textarea-wrap textarea:focus {
|
|
border-color: var(--color-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ── Modals — paper sheet with a soft editorial shadow ───────────── */
|
|
[data-style="nyt"] .modal-card,
|
|
[data-style="nyt"] .confirm-modal,
|
|
[data-style="nyt"] .user-menu-dropdown,
|
|
[data-style="nyt"] .user-list-popover {
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
[data-style="nyt"] .modal-header {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ── Rich content cards — keep brand cue, square it, drop the glow ── */
|
|
[data-style="nyt"] .rich-content-card {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ── Global player — framed strip ────────────────────────────────── */
|
|
[data-style="nyt"] .global-player {
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* ── Drop the reply "tree" rules; nesting reads from indentation alone ── */
|
|
[data-style="nyt"] .comment-replies {
|
|
border-left: none;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════
|
|
Monochrome UI chrome — colour is reserved for meaning (danger, the
|
|
notification badge, brand-provider cues). Everything else is ink & paper.
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Feed sort — section-front tabs: an underline, not a filled chip. */
|
|
[data-style="nyt"] .feed-sort-btn {
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
background: none;
|
|
color: var(--color-text-muted);
|
|
padding: 0.2rem 0.1rem;
|
|
margin: 0 0.3rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0.1em; /* condensed caps need more air than the default */
|
|
}
|
|
[data-style="nyt"] .feed-sort-btn:hover {
|
|
background: none;
|
|
color: var(--color-text);
|
|
}
|
|
[data-style="nyt"] .feed-sort-btn.active {
|
|
background: none;
|
|
color: var(--color-text);
|
|
border-bottom-color: var(--color-text);
|
|
}
|
|
|
|
/* Square off the remaining pills & chips. */
|
|
[data-style="nyt"] .playlist-badge,
|
|
[data-style="nyt"] .dump-card-private-badge,
|
|
[data-style="nyt"] .notifications-unread-pill,
|
|
[data-style="nyt"] .notification-badge,
|
|
[data-style="nyt"] .vote-btn,
|
|
[data-style="nyt"] .follow-btn,
|
|
[data-style="nyt"] .btn-add-playlist,
|
|
[data-style="nyt"] .invite-btn,
|
|
[data-style="nyt"] .profile-role-chip {
|
|
border: none;
|
|
}
|
|
|
|
/* Category management chips / inline editor: squared, no accent glow. */
|
|
|
|
[data-style="nyt"] .category-editor {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Links are now ink, so give the user-link classes a hover underline
|
|
to keep them findable without colour. */
|
|
[data-style="nyt"] .dump-op-link:hover,
|
|
[data-style="nyt"] .playlist-card-owner:hover,
|
|
[data-style="nyt"] .playlist-detail-owner:hover,
|
|
[data-style="nyt"] .comment-author:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* Desaturate decorative UI emoji/icons (the header truck, notification
|
|
type icons, card glyphs…). Real content — avatars, uploaded thumbnails,
|
|
media — is left in colour. grayscale() also greys the notif icon tints. */
|
|
[data-style="nyt"] .app-header-brand,
|
|
[data-style="nyt"] .nav-search-btn,
|
|
[data-style="nyt"] .search-bar-btn,
|
|
[data-style="nyt"] .notification-bell-icon,
|
|
[data-style="nyt"] .notif-icon,
|
|
[data-style="nyt"] .notifications-empty-icon,
|
|
[data-style="nyt"] .notifications-title-bell,
|
|
[data-style="nyt"] .chat-button-icon,
|
|
[data-style="nyt"] .dump-card-preview-icon,
|
|
[data-style="nyt"] .playlist-card-icon,
|
|
[data-style="nyt"] .rich-content-compact-icon,
|
|
[data-style="nyt"] .journal-card-glyph,
|
|
[data-style="nyt"] .fdz__file-icon,
|
|
[data-style="nyt"] .thumb-placeholder-icon,
|
|
[data-style="nyt"] .empty-state {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
/* Monochrome by design — a dumped site's brand color doesn't get to tint the
|
|
page, so the placeholder is the theme's own surface with a gray glyph. */
|
|
[data-style="nyt"] {
|
|
--thumb-tint-strength: 0%;
|
|
}
|
|
|
|
/* ── Tighter, continuous ruled feed (no inter-item gap; the hairline
|
|
bottom rules read as one column). Even vertical padding per item. ── */
|
|
[data-style="nyt"] .dump-feed {
|
|
gap: 0;
|
|
}
|
|
[data-style="nyt"] .dump-card-inner,
|
|
[data-style="nyt"] .playlist-card-inner {
|
|
padding-top: 0.9rem;
|
|
padding-bottom: 0.9rem;
|
|
}
|
|
|
|
/* ── Card thumbnail — square & flat box (no pop/shadow), but keep a
|
|
hover effect adapted to the theme: the image zooms gently inside its
|
|
fixed, clipped frame, the editorial way. ───────────────────────── */
|
|
[data-style="nyt"] .dump-card-preview,
|
|
[data-style="nyt"] .playlist-card-preview {
|
|
transition: none;
|
|
}
|
|
[data-style="nyt"] .dump-card-inner:hover .dump-card-preview,
|
|
[data-style="nyt"] .playlist-card-inner:hover .playlist-card-preview {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
[data-style="nyt"] .dump-card-preview img,
|
|
[data-style="nyt"] .playlist-card-preview img {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
[data-style="nyt"] .dump-card-inner:hover .dump-card-preview img,
|
|
[data-style="nyt"] .playlist-card-inner:hover .playlist-card-preview img {
|
|
transform: scale(1.09);
|
|
}
|
|
|
|
/* ── Category switcher dropdown — paper sheet, squared ───────────── */
|
|
/* Match the other nyt popovers (1px rule + editorial shadow, no rounding).
|
|
Option rows inherit the global square-off, so no per-row rule is needed. */
|
|
[data-style="nyt"] .category-switcher-menu {
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
|
}
|