/ appended to ), so without listing them here they fall back to tokens.css — where --font-size-* and --radius-4xl don't exist, breaking fonts and the modal's rounded corner. Layout props (position/bg/etc.) stay on .aep-page only, below — the fixed overlays must not inherit those. */ .aep-page, #ao-rate-modal, .ao-cel-overlay { --spacing-smd: 12px; --spacing-mlg: 20px; --spacing-4xl: 56px; --spacing-6xl: 72px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 36px; --font-size-base: 16px; --font-display: var(--font-montra), sans-serif; /* Match animeoshi's exact scale where the vendored tokens.css diverges. These are scoped to the episode page (and its overlays) so the shared site CSS is untouched. animeoshi uses translucent pebble tokens; tokens.css uses solids. */ --spacing-xs: 5px; --radius-2xl: 21px; --radius-4xl: 32px; /* QuickRating modal corner (animeoshi --radius-4xl) */ --radius-new: 10px; --p-small-font-size: clamp(10px, 9px + 0.1786vw, 12px); --label-small-font-size: clamp(10px, 9px + 0.1786vw, 12px); --p-font-size: clamp(12px, 11px + 0.1786vw, 16px); --color-text-secondary: rgba(237, 237, 237, 0.8); --color-text-tertiary: rgba(237, 237, 237, 0.5); --color-border: rgba(237, 237, 237, 0.2); --color-surface: rgba(237, 237, 237, 0.05); /* animeoshi's page content gutter (breadcrumb/hero/body all align to this) — clamp(16px, 5vw, 104px) = ~72px @1440, matching the live. Was a fixed 140px. */ --page-gutter: clamp(16px, 5vw, 104px); /* animeoshi's --detail-rail (Weekly Verdict rail + right sidebar width). Was 373px. */ --detail-rail: 420px; } /* Layout props for the page container only (NOT the fixed modal/overlays). */ .aep-page { position: relative; background: var(--charcoal); color: var(--pebble); min-height: 100vh; } /* ── Hero band (full-bleed black) ─────────────────────────────── */ .aep-hero { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); background: var(--black); } .aep-hero-inner { display: flex; flex-direction: column; gap: var(--spacing-xl); max-width: 1512px; margin: 0 auto; padding: var(--spacing-xl) var(--page-gutter) var(--spacing-2xl); box-sizing: border-box; } /* ── Breadcrumb ───────────────────────────────────────────────── */ /* Breadcrumb — mirrors animeoshi's EpisodeBreadcrumb: 14px, 5px gap, links at text-secondary (normal weight), current at text-primary semibold, 12px chevron. */ .aep-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); margin-top: 17px; font-size: var(--font-size-sm); line-height: 20px; color: rgba(237, 237, 237, 0.8); min-width: 0; } .aep-crumbs a { color: inherit; text-decoration: none; } .aep-crumbs a:hover { color: var(--pebble); text-decoration: underline; } .aep-crumb-sep { width: 12px; height: 12px; flex-shrink: 0; color: rgba(237, 237, 237, 0.5); } .aep-crumb-current { color: var(--pebble); font-weight: var(--font-weight-semibold); } /* ── Countdown banner ─────────────────────────────────────────── */ .aep-countdown { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); width: 100%; padding: var(--spacing-md); background-color: rgba(237, 237, 237, 0.05); border: var(--border-normal) solid rgba(237, 237, 237, 0.2); border-radius: var(--radius-2xl); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-sizing: border-box; overflow: hidden; } .aep-countdown::before { content: ""; position: absolute; top: -60%; left: 20%; width: 60%; height: 160%; background: radial-gradient(ellipse at center, hsl(346 100% 71% / 0.18), transparent 70%); pointer-events: none; } .aep-countdown-info { position: relative; display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; } .aep-countdown-label { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.2; } .aep-countdown-clock { display: flex; align-items: baseline; gap: var(--spacing-xs); flex-wrap: nowrap; } .aep-countdown-seg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--color-accent); line-height: 1; white-space: nowrap; } .aep-countdown-unit { font-size: 1em; font-weight: var(--font-weight-bold); margin-left: 1px; color: var(--color-accent); } .aep-countdown-sep { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-tertiary); line-height: 1; } .aep-countdown-notify { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: var(--spacing-xs) 10px; background: var(--pebble); color: rgb(23, 13, 33); border: var(--border-normal) solid transparent; border-radius: var(--radius-max); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 16px; white-space: nowrap; text-decoration: none; transition: opacity 0.2s ease; } .aep-countdown-notify:hover { opacity: 0.85; } .aep-countdown-notify-outline { background: transparent; color: var(--color-text-primary); border-color: var(--color-border); } .aep-countdown-notify-outline:hover { opacity: 1; background: rgba(237, 237, 237, 0.08); } .aep-bell-icon { width: 14px; height: 14px; flex-shrink: 0; } /* ── Hero block ───────────────────────────────────────────────── */ .aep-hero-block { display: grid; /* Cover column matches live animeoshi.com (measured 251px at desktop); the old 209px cap rendered the poster too narrow, so it looked thin/elongated. */ grid-template-columns: clamp(96px, 26.4vw, 251px) minmax(0, 1fr); grid-template-areas: "cover title" "cover osh" "cover nav" "rate watch"; column-gap: var(--spacing-mlg); row-gap: var(--spacing-smd); align-items: stretch; } .aep-cover-stack { grid-area: cover; position: relative; width: 100%; min-height: clamp(126px, 35vw, 328px); align-self: stretch; } .aep-cover { position: absolute; border: 2.34px solid rgba(237, 237, 237, 0.2); border-radius: var(--radius-new); background-size: cover; background-position: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .aep-cover-back { top: 9px; left: 9px; right: 0; bottom: 0; opacity: 0.85; } .aep-cover-mid { top: 4.5px; left: 4.5px; right: 4.5px; bottom: 4.5px; opacity: 0.92; } .aep-cover-front { top: 0; left: 0; right: 9px; bottom: 9px; } /* Hero with the Weekly Verdict rail. The rail is taken OUT of grid flow (position:absolute into reserved padding-right) so its tall card can't inflate the grid rows and stretch the cover — the cover keeps its natural content height, and the card fills the full hero height + scrolls. Mirrors animeoshi-web's .heroBlockWithVote (reserved padding + absolute .titleRight); the base 2-col grid/areas are inherited from .aep-hero-block. */ .aep-hero-block-verdict { position: relative; padding-right: calc(var(--detail-rail) + var(--spacing-mlg)); } .aep-title-right { position: absolute; top: 0; right: 0; bottom: 0; width: var(--detail-rail); min-width: 0; min-height: 0; overflow: hidden; } /* ── Weekly Verdict card ──────────────────────────────────────── */ .aep-verdict { position: relative; display: flex; flex-direction: column; gap: var(--spacing-md); border: var(--border-normal) solid rgba(237, 237, 237, 0.2); border-radius: var(--radius-xl); padding: var(--spacing-lg); width: 100%; height: auto; max-height: 100%; min-height: 0; box-sizing: border-box; background: rgba(237, 237, 237, 0.05); } .aep-verdict-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } .aep-verdict-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); flex-shrink: 0; } .aep-verdict-heading { margin: 0; font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.05; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-primary); word-break: break-word; } .aep-verdict-rank { color: var(--color-accent); font-size: 1.4em; line-height: 0.9; vertical-align: -0.05em; } .aep-verdict-behind { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--charcoal); font-family: var(--font-display); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 24px hsl(68 100% 50% / 0.3); } .aep-verdict-empty { padding: var(--spacing-lg) var(--spacing-md); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); } /* Vote button — mirrors animeoshi-web's VoteButton pill (light fill / dark label). */ .aep-verdict-vote { display: inline-flex; align-self: flex-start; } /* Author display rules beat the UA [hidden] rule — re-hide explicitly. */ .aep-verdict-vote[hidden], .aep-verdict-behind[hidden] { display: none; } .aep-verdict-vote-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); min-height: 25px; padding: var(--spacing-xs) 10px; border: 0; border-radius: var(--radius-full); background: var(--color-text-primary); color: var(--charcoal); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 16px; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .aep-verdict-vote-btn:hover:not(:disabled) { opacity: 0.85; } .aep-verdict-vote-active { background: rgba(255, 255, 255, 0.1); color: var(--color-text-primary); box-shadow: inset 0 0 0 var(--border-normal) var(--color-border); } .aep-verdict-vote-btn:disabled { cursor: not-allowed; background: rgba(255, 255, 255, 0.1); color: var(--color-text-secondary); box-shadow: inset 0 0 0 var(--border-normal) var(--color-border); } /* Cap the visible list to ~8 rows (each row ~35px) then scroll for the rest — the card sizes to its content so there's no empty gap below the list. */ .aep-verdict-list { list-style: none; margin: var(--spacing-xs) 0 0; padding: 10px var(--spacing-xs) var(--spacing-md) 0; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-accent) rgba(237, 237, 237, 0.1); } .aep-verdict-list::-webkit-scrollbar { width: 8px; } .aep-verdict-list::-webkit-scrollbar-track { background: rgba(237, 237, 237, 0.1); border-radius: 999px; } .aep-verdict-list::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 999px; border: 2px solid var(--color-surface); background-clip: padding-box; } .aep-verdict-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm); } .aep-verdict-row + .aep-verdict-row { border-top: var(--border-normal) solid rgba(237, 237, 237, 0.1); } /* Current anime's row — accent inset border + "YOU'RE HERE" pill (mirrors the live VerdictRow highlighted state). */ .aep-verdict-row-current { border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border-large) var(--color-accent); padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .aep-verdict-row-current, .aep-verdict-row-current + .aep-verdict-row { border-top-color: transparent; } .aep-verdict-youre-here { position: absolute; top: -7px; right: 12px; padding: 2px 6px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--charcoal); font-family: var(--font-display); font-size: var(--font-size-2xs, 10px); font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; z-index: 1; } .aep-verdict-link { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; text-decoration: none; flex: 1; } .aep-verdict-link:hover .aep-verdict-name { color: var(--color-accent); } .aep-verdict-rank-num { flex-shrink: 0; width: 18px; text-align: center; font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); } .aep-verdict-name { font-size: var(--font-size-xs); line-height: var(--line-height-sm, 1.4); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Episode tag: AO's .ep is normal-weight + secondary color; rendered smaller here. */ .aep-verdict-ep { font-size: var(--font-size-2xs, 10px); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); } .aep-verdict-row-current .aep-verdict-rank-num { color: var(--color-accent); } .aep-verdict-trailing { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; } .aep-verdict-votes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .aep-verdict-votes-n { font-family: var(--font-display); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1; } .aep-verdict-votes-l { font-size: var(--font-size-2xs, 10px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); } .aep-mv { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 40px; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full); font-family: var(--font-display); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1; box-sizing: border-box; } .aep-mv-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .aep-mv-arrow-up { border-bottom: 6px solid var(--color-accent); } .aep-mv-arrow-down { border-top: 6px solid var(--cherry-top); } .aep-mv-up { color: var(--color-accent); background: hsl(68 100% 50% / 0.3); } .aep-mv-down { color: var(--cherry-top); background: hsl(0 85% 60% / 0.12); } .aep-mv-new { color: var(--kawaii-core); background: hsl(305 100% 76% / 0.15); } /* ── Mobile sticky action bar — mirrors AO AnimeBottomStickyBar ──── Fixed to the bottom on mobile; Share (copy link) + Rate Episode CTA. Hidden ≥769px, where the rate pill + sidebar surface these actions. The floating mobile dock (.aod-container, bottom:20px / z-index:50) floats over this bar (z-index:40) — exactly as it does on AO. */ .aep-actionbar { display: none; } @media (max-width: 768px) { .aep-actionbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); padding: 10px var(--spacing-md) calc(10px + env(safe-area-inset-bottom)); background: rgba(20, 14, 28, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(237, 237, 237, 0.08); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); } } .aep-actionbar-share { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(237, 237, 237, 0.08); color: var(--pebble); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; } .aep-actionbar-share:hover { background: rgba(237, 237, 237, 0.16); } .aep-actionbar-share:active { background: rgba(237, 237, 237, 0.2); } .aep-actionbar-share-icon { width: 20px; height: 20px; } .aep-actionbar-rate { flex: 1; height: 44px; max-width: 240px; border: 0; border-radius: var(--radius-max); background: var(--pebble); color: var(--charcoal); font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; padding: 0 var(--spacing-lg); cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .aep-actionbar-rate:hover { background: var(--ivory); } .aep-actionbar-rate:active { transform: scale(0.98); } /* Title */ .aep-title-text { grid-area: title; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .aep-title-main { font-family: var(--font-display); font-size: var(--font-size-4xl); font-weight: normal; color: var(--color-text-primary); margin: 0; line-height: 1.1; text-transform: uppercase; } .aep-source { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; } .aep-tag-row { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; } .aep-tag { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .aep-tag-sep { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } /* Oshimeter */ .aep-osh { grid-area: osh; min-width: 0; max-width: 460px; } .aep-osh-section { background: rgba(237, 237, 237, 0.05); border-radius: var(--radius-lg); display: flex; flex-direction: column; } .aep-osh-main { padding: var(--spacing-md); display: flex; flex-direction: row; gap: 30px; align-items: center; justify-content: space-between; } .aep-osh-group { display: flex; flex-direction: column; gap: 30px; flex-shrink: 0; } .aep-osh-title { font-family: var(--font-display); font-size: var(--font-size-lg); line-height: 22px; letter-spacing: 1px; margin: 0; text-transform: uppercase; font-weight: var(--font-weight-normal); color: var(--pebble); } .aep-osh-row { display: flex; gap: var(--spacing-mlg); align-items: center; } .aep-osh-score-col { display: flex; flex-direction: column; gap: 10px; align-items: center; flex-shrink: 0; } .aep-osh-score { font-size: 48px; font-weight: var(--font-weight-bolder); color: var(--sundrop); line-height: 1; text-align: center; } .aep-osh-fans { font-size: var(--font-size-sm); line-height: 18px; color: rgba(237, 237, 237, 0.55); text-align: center; white-space: nowrap; margin: 0; } .aep-osh-bars { display: flex; align-items: stretch; gap: 5px; height: 66px; opacity: 0.5; } .aep-osh-bar-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; align-self: stretch; } .aep-osh-bar-track { width: 8px; height: 100%; border-radius: var(--radius-sm, 4px); display: flex; align-items: flex-end; overflow: hidden; } .aep-osh-bar-fill { width: 100%; background: #d9d9d9; border-radius: var(--radius-sm, 4px); min-height: 0; } .aep-osh-bar-label { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; line-height: 10px; color: rgba(237, 237, 237, 0.8); font-weight: var(--font-weight-medium); } .aep-osh-star { font-size: 8px; line-height: 1; } .aep-osh-chart-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; } /* "You've rated this X/10" — shown client-side by rate.js (mirrors OshimeterSection). */ .aep-osh-userrating { padding: var(--spacing-smd) 15px; border-top: 1px solid rgba(237, 237, 237, 0.1); font-size: var(--font-size-sm); line-height: 18px; color: var(--pebble); } .aep-osh-userrating[hidden] { display: none; } .aep-osh-userrating-score { color: var(--color-accent); font-weight: var(--font-weight-medium); } /* Radar chart */ .aep-chart-wrap { position: relative; width: 100%; max-width: 150px; aspect-ratio: 1; margin: 0 auto; } .aep-chart { width: 100%; height: 100%; } .aep-chart-ring { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5; } .aep-chart-axis { stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5; } .aep-chart-area { fill: rgba(200, 220, 50, 0.3); } .aep-chart-stroke { fill: none; stroke: rgba(200, 220, 50, 0.8); stroke-width: 0.3; stroke-linejoin: round; } .aep-chart-label { position: absolute; transform: translate(-50%, -50%); font-size: 10px; color: var(--color-text-secondary); width: min-content; text-align: center; line-height: 1.2; pointer-events: none; } /* Nav */ .aep-nav { grid-area: nav; max-width: 460px; } .aep-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); } .aep-nav-btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .aep-nav-btn:hover { background-color: var(--color-surface); border-color: var(--color-text-secondary); } .aep-nav-btn.aep-disabled { opacity: 0.35; pointer-events: none; } /* Rate + Watch */ .aep-rate { grid-area: rate; } .aep-watch { grid-area: watch; max-width: 460px; } .aep-rate-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 44px; padding: 0 var(--spacing-md); border-radius: var(--radius-max); background: rgba(237, 237, 237, 0.05); border: 1px solid rgba(237, 237, 237, 0.1); color: var(--pebble); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; text-decoration: none; box-sizing: border-box; } .aep-rate-pill:hover { background: rgba(237, 237, 237, 0.08); } .aep-star-row { flex-shrink: 0; } /* ── Rate stars: half-star hover preview (mirrors the live EpRatingPill) ── Slots are 5→1 in DOM + row-reverse, so :has() fills the hovered star's half and `~` fills the visually-preceding stars. */ .ao-stars { --rate-star: 22px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--spacing-xs); color: rgba(237, 237, 237, 0.55); } .ao-star-slot { position: relative; width: var(--rate-star); height: var(--rate-star); flex-shrink: 0; } .ao-star-slot .ao-star { width: var(--rate-star); height: var(--rate-star); display: block; } .ao-star-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width 0.08s ease; color: var(--pebble); } .ao-star-fill .ao-star-solid { width: var(--rate-star); } .ao-half { position: absolute; top: 0; height: 100%; width: 50%; z-index: 2; cursor: pointer; } .ao-half-l { left: 0; } .ao-half-r { left: 50%; } .ao-star-slot:has(.ao-half-l:hover) .ao-star-fill { width: 50%; } .ao-star-slot:has(.ao-half-r:hover) .ao-star-fill { width: 100%; } .ao-star-slot:hover ~ .ao-star-slot .ao-star-fill { width: 100%; } .aep-btn { display: inline-flex; align-items: center; justify-content: center; gap: clamp(var(--spacing-xs), 0.6vw, 6px); width: 100%; height: clamp(42px, 5.3vw, 48px); padding: 0 clamp(var(--spacing-smd), 1.4vw, var(--spacing-md)); border-radius: var(--radius-full); background-color: var(--pebble); border: var(--border-normal) solid var(--pebble); color: var(--color-button-text); font-size: clamp(11px, 1.4vw, var(--font-size-sm)); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; text-decoration: none; box-sizing: border-box; transition: opacity 0.15s ease; } .aep-btn:hover { opacity: 0.85; } /* Watched state (client-side): transparent + border, like the live splitActive. */ .aep-btn-watched { background-color: transparent; border-color: var(--color-border); color: var(--color-text-primary); } .aep-btn-watched:hover { opacity: 1; background-color: rgba(237, 237, 237, 0.06); } .aep-btn-icon { width: clamp(13px, 1.6vw, 16px); height: clamp(13px, 1.6vw, 16px); flex-shrink: 0; } /* Green filled check when watched (live: .pillIconWatched { color: var(--color-success) }). */ .aep-btn-watched .aep-btn-icon { color: var(--color-success); } /* ── Backfill catch-up prompt (mirrors animeoshi-web EpisodeBackfillPrompt) ── Shown client-side under the button after marking an episode watched, when earlier episodes are still unwatched. --color-surface-5 / -button-text-primary aren't vendored here, so map to their resolved values (pebble-5 / charcoal). */ .aep-watch { display: flex; flex-direction: column; gap: var(--spacing-sm); } .aep-backfill { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); min-height: 41px; padding: var(--spacing-sm); background: rgba(237, 237, 237, 0.05); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-md); box-sizing: border-box; } .aep-backfill-text { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; color: var(--color-text-primary); } .aep-backfill-actions { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; } .aep-backfill-skip, .aep-backfill-confirm { height: 25px; padding: 0 var(--spacing-sm); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } .aep-backfill-skip { border: var(--border-normal) solid var(--color-border); background: var(--color-bg); color: var(--color-text-primary); } .aep-backfill-confirm { border: 0; background: var(--color-text-primary); color: var(--color-button-text); } .aep-backfill-skip:hover, .aep-backfill-confirm:hover { opacity: 0.85; } .aep-backfill-skip:disabled, .aep-backfill-confirm:disabled { cursor: not-allowed; opacity: 0.6; } /* ── Body (main + sidebar) ────────────────────────────────────── */ .aep-container { display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-2xl) var(--page-gutter) var(--spacing-7xl); max-width: 1512px; margin: 0 auto; box-sizing: border-box; } .aep-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--detail-rail); column-gap: var(--spacing-md); width: 100%; } .aep-main { display: flex; flex-direction: column; gap: var(--spacing-mlg); min-width: 0; } .aep-sidebar { display: flex; flex-direction: column; gap: var(--spacing-mlg); align-self: start; } /* Overview card (main) */ .aep-card { background: rgba(237, 237, 237, 0.05); border-radius: var(--radius-lg); padding: 15px; display: flex; flex-direction: column; gap: var(--spacing-smd); } .aep-card h2 { font-family: var(--font-display); font-size: var(--font-size-lg); line-height: 22px; letter-spacing: 1px; margin: 0; text-transform: uppercase; font-weight: var(--font-weight-normal); color: var(--pebble); } .aep-card p { margin: 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--pebble); } /* ── Readthrough (main) — scene-by-scene recap, collapsed by default ── Ported 1:1 from animeoshi-web's ReadthroughSection. */ .aer-section { display: flex; flex-direction: column; gap: var(--spacing-md); background: var(--color-surface); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); } .aer-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); } .aer-header-left { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; } .aer-title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: normal; text-transform: uppercase; color: var(--color-text-primary); margin: 0; line-height: 1.2; display: inline-flex; align-items: center; gap: var(--spacing-xs); } .aer-info-icon { color: var(--color-text-tertiary); display: inline-flex; align-items: center; } .aer-meta { font-size: var(--p-font-size); color: var(--color-text-secondary); margin: 0; line-height: 1.4; } .aer-toggle { background: none; border: none; padding: 0; font-family: inherit; font-size: var(--p-font-size); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--spacing-xs); white-space: nowrap; flex-shrink: 0; align-self: flex-start; } .aer-toggle-caret { transition: transform 0.15s ease; } .aer-section.aer-open .aer-toggle-caret { transform: rotate(90deg); } .aer-scene-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .aer-scene-list[hidden] { display: none; } /* author display:flex would otherwise beat the [hidden] UA rule */ .aer-scene { display: flex; flex-direction: column; gap: 10px; background: var(--color-surface); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 15px 15px; } .aer-scene-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); } .aer-scene-title { font-size: var(--p-font-size); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; line-height: 1.4; min-width: 0; } .aer-scene-body { font-size: var(--p-font-size); color: var(--color-text-secondary); line-height: 1.6; margin: 0; } .aer-scene-body strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); } .aer-tag-list { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; flex-wrap: wrap; } .aer-tag { font-size: var(--label-small-font-size); font-weight: var(--font-weight-semibold); padding: 2px var(--spacing-sm); border-radius: var(--radius-full); line-height: 1.4; white-space: nowrap; } .aer-tag-default, .aer-tag-setup { background: rgba(237, 237, 237, 0.05); color: var(--color-text-tertiary); } .aer-tag-plot { background: hsl(203 100% 50% / 0.18); color: var(--aqua-zap); } .aer-tag-emotional { background: hsl(305 100% 76% / 0.18); color: var(--kawaii-core); } .aer-tag-action { background: hsl(0 85% 60% / 0.18); color: var(--cherry-top); } .aer-tag-reveal { background: hsl(174 100% 50% / 0.18); color: var(--cotton-sky); } .aer-tag-comedy { background: hsl(68 100% 50% / 0.18); color: var(--sundrop); } @media (max-width: 600px) { .aer-header-row { align-items: center; gap: var(--spacing-sm); } .aer-section { gap: var(--spacing-sm); } .aer-scene-head { flex-direction: column; align-items: flex-start; } } /* Episode context (sidebar) */ .aep-context { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg); background: var(--color-surface); border-radius: var(--radius-lg); } .aep-context-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: normal; text-transform: uppercase; color: var(--color-text-primary); margin: 0; } .aep-context-text { font-size: var(--p-small-font-size); color: var(--color-text-secondary); line-height: 1.6; margin: 0; } /* Sidebar info grid */ .aep-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); } .aep-info-item { background: var(--color-surface); border-radius: var(--radius-md); border: var(--border-normal) solid var(--color-border); padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); } .aep-info-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .aep-info-value { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } /* Legal */ .aep-legal { display: flex; flex-direction: column; gap: var(--spacing-md); } .aep-legal p { font-size: var(--p-small-font-size); color: var(--color-text-secondary); line-height: 1.5; margin: 0; } /* ── Embed code generator (ported from EmbedCodeGenerator.module.css) ─── */ .aep-embed { position: relative; width: 100%; } .aep-embed-trigger { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: 100%; padding: 10px var(--spacing-md); border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-body); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .aep-embed-trigger:hover { border-color: var(--color-accent); color: var(--color-text-primary); } /* Collapsed by default (display:none, not the fragile [hidden] attr); the script adds .aep-embed-open on click to reveal the tabs / code. */ .aep-embed-popover { margin-top: var(--spacing-sm); padding: var(--spacing-smd); border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-md); background: var(--color-bg); display: none; flex-direction: column; gap: 10px; } .aep-embed-popover.aep-embed-open { display: flex; } .aep-embed-tabs { display: flex; gap: var(--spacing-xs); } .aep-embed-tab { flex: 1; padding: 6px var(--spacing-smd); border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-md); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); font-family: var(--font-body); cursor: pointer; transition: all 0.15s ease; } .aep-embed-tab:hover { color: var(--color-text-secondary); } .aep-embed-tab-active { background: rgba(237, 237, 237, 0.1); color: var(--color-text-primary); border-color: var(--color-accent); } .aep-embed-theme { display: flex; align-items: center; gap: 6px; } .aep-embed-theme-label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-right: 2px; } .aep-embed-theme-btn { padding: 3px 10px; border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-family: var(--font-body); cursor: pointer; transition: all 0.15s ease; } .aep-embed-theme-btn:hover { color: var(--color-text-secondary); } .aep-embed-theme-active { background: rgba(237, 237, 237, 0.1); color: var(--color-text-primary); border-color: var(--color-accent); } .aep-embed-code-block { padding: var(--spacing-sm); border-radius: var(--radius-md); background: var(--color-surface); overflow-x: auto; } .aep-embed-code { font-size: 10px; line-height: 1.5; color: var(--color-text-secondary); word-break: break-all; white-space: pre-wrap; font-family: monospace; } .aep-embed-copy { padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--radius-md); background: var(--pebble); color: var(--color-button-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-family: var(--font-body); cursor: pointer; transition: opacity 0.15s ease; } .aep-embed-copy:hover { opacity: 0.9; } /* ── Quick Takes (client-side reviews) ────────────────────────── */ .aeq-section { background: rgba(237, 237, 237, 0.05); border-radius: var(--radius-lg); padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-mlg); min-width: 0; } .aeq-header { display: flex; align-items: center; gap: var(--spacing-smd); flex-wrap: wrap; } .aeq-header-left { display: flex; align-items: center; gap: var(--spacing-smd); flex-wrap: wrap; } .aeq-title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: normal; text-transform: uppercase; color: var(--color-text-primary); margin: 0; line-height: 1.2; white-space: nowrap; } .aeq-filters { display: inline-flex; gap: 3px; } .aeq-pill { padding: 5px 10px; border-radius: var(--radius-max); background: rgba(255, 255, 255, 0.1); color: var(--pebble); font: inherit; font-size: var(--font-size-xs); line-height: 16px; font-weight: var(--font-weight-medium); border: 0; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; white-space: nowrap; } .aeq-pill:not(.aeq-pill-active):hover { background: rgba(255, 255, 255, 0.15); } .aeq-pill-active { background: var(--pebble); color: var(--charcoal); } .aeq-view-all { margin-left: auto; display: inline-flex; align-items: center; gap: var(--spacing-xs); background: none; border: none; padding: 0; font-family: inherit; font-size: var(--font-size-sm); line-height: 20px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; flex-shrink: 0; cursor: pointer; } .aeq-caret { width: 12px; height: 12px; flex-shrink: 0; } .aeq-view-all:hover { color: var(--color-text-primary); } .aeq-view-all:disabled { opacity: 0.6; cursor: default; } /* Bottom slot — matches the live .viewAllBottom: centered, full-width, sundrop. Used directly as the collapsed "View all" button, and as a flex wrapper that centers the secondary-grey "Load more" (.aeq-view-all) button. */ .aeq-view-all-bottom { align-self: center; width: 100%; padding-top: var(--spacing-sm); background: none; border: none; font-family: inherit; font-size: var(--font-size-sm); line-height: 20px; font-weight: var(--font-weight-semibold); color: var(--sundrop); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 2px; } .aeq-view-all-bottom:hover { text-decoration: underline; } .aeq-list { display: flex; flex-direction: column; gap: 15px; min-width: 0; } .aeq-loading, .aeq-empty { padding: var(--spacing-lg) var(--spacing-smd); text-align: center; color: rgba(237, 237, 237, 0.55); font-size: var(--font-size-sm); line-height: 20px; margin: 0; } .aeq-card { display: flex; flex-direction: column; gap: 10px; padding-bottom: 15px; border-bottom: var(--border-normal) solid rgba(237, 237, 237, 0.1); min-width: 0; background: transparent; text-decoration: none; color: inherit; cursor: pointer; } .aeq-card:last-child { border-bottom: none; padding-bottom: 0; } .aeq-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); } .aeq-user { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; cursor: pointer; text-decoration: none; } .aeq-user:hover .aeq-username { text-decoration: underline; } .aeq-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(237, 237, 237, 0.1); } .aeq-user-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; } .aeq-username { font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aeq-sub { display: flex; align-items: center; gap: var(--spacing-xs); } .aeq-stars { display: inline-flex; align-items: center; gap: 2px; } .aeq-star { width: 16px; height: 16px; color: var(--color-border); flex-shrink: 0; } .aeq-star-filled { color: var(--ivory); } .aeq-time { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; } .aeq-verified { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); background: var(--aqua-zap); color: var(--ivory); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; flex-shrink: 0; } .aeq-head-right { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; } .aeq-votes { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .aeq-vote { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--color-surface); border: 0; border-radius: 50%; color: var(--color-text-primary); cursor: pointer; flex-shrink: 0; transition: transform 0.15s ease, color 0.15s ease; } .aeq-vote:hover { transform: scale(1.05); } .aeq-vote-active { color: var(--color-accent); } /* Edit affordance on the user's own take (mirrors animeoshi-web SignalCard .editButton). */ .aeq-edit { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-surface); border: 0; border-radius: var(--radius-full); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: transform 0.2s ease; } .aeq-edit:hover { transform: scale(1.05); } .aeq-review { font-size: var(--font-size-sm); line-height: 18px; color: var(--color-text-primary); margin: 0; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; } /* ── Responsive ───────────────────────────────────────────────── */ /* ── Below 1100px: AO switches to its MOBILE layout (tablets included) ── AO's episode page uses one layout for everything < 1100px (its .mobileOnly). So at tablet width the hero drops the desktop verdict rail, the Oshimeter becomes a full-width row under the hero, and the content stacks in AO's order: Hero → Oshimeter → Episode Context → Readthrough → Reviews → Weekly Verdict. (Phone-specific sizing is layered on at ≤640 / ≤380 below.) */ @media (max-width: 1099.98px) { .aep-hero-inner, .aep-container { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } /* Breadcrumb is desktop-only on AO (hidden < 1100). */ .aep-crumbs { display: none; } /* Hero: cover spans title+nav rows; Rate / Mark-as-watched / Oshimeter become full-width rows beneath. Verdict rail is undone (relocated by verdictCsr). */ .aep-hero-block, .aep-hero-block-verdict { position: static; padding-right: 0; grid-template-columns: auto minmax(0, 1fr); /* AO tablet (measured at 820px): the cover is tall and everything — title, EP nav, Rate (star) pill, Mark-as-watched — sits BESIDE it in the right column, each spanning the full right-column width (nav's "Next EP" starts at x515, "Mark as watched" at x219 — both right of the cover, which ends ~x210). Only the Oshimeter is full-page-width, below the hero. */ grid-template-areas: "cover title" "cover nav" "cover rate" "cover watch" "osh osh" "right right"; column-gap: var(--spacing-mlg); } /* Cover stretches (default align-items) to the right-column content height — no min-height floor / aspect lock so it never inflates past the stack. */ .aep-cover-stack { width: clamp(120px, 18vw, 175px); min-height: 0; } /* Drop the desktop 460px cap so the EP nav + Mark-as-watched fill the full right column (beside the cover), like the star pill and AO. */ .aep-nav, .aep-watch { max-width: none; } .aep-osh { max-width: none; } /* Title stays at AO's 36px (4xl) through the tablet range; phones shrink it to 20px in the ≤640 block below. */ /* Flatten main/sidebar so the single-column grid can order sections directly, matching AO's mobile order. Stats grid + embed aren't shown on AO < 1100. */ .aep-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-xl); } .aep-main, .aep-sidebar { display: contents; } .aep-context { order: 1; } .aer-section { order: 2; } /* Readthrough */ .aeq-section { order: 3; } /* Episode Reviews */ /* Weekly Verdict — relocated into .aep-grid by verdictCsr; clear the desktop "right" area so it doesn't spawn a phantom grid column. */ .aep-title-right { position: static; width: auto; overflow: visible; grid-area: auto; order: 4; } .aep-legal { order: 5; } .aep-info-grid, .aep-embed { display: none; } /* No bounding rail height in the stacked layout — re-cap the list so it scrolls. */ .aep-verdict-list { max-height: 200px; } } @media (max-width: 640px) { .aep-hero-inner { padding: var(--spacing-md); } .aep-container { padding: var(--spacing-md); gap: var(--spacing-md); } /* Match AO mobile: breadcrumb hidden; the poster stays tall with the EP nav, Rate (star) pill, and Mark-as-watched all BESIDE it in the right column (measured on AO at 400px: star/watch left ≈ x150, right of the cover) — NOT full-width below. Only the Oshimeter is full-width. Tighter gap on phone. */ .aep-crumbs { display: none; } .aep-hero-block, .aep-hero-block-verdict { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cover title" "cover nav" "cover rate" "cover watch" "osh osh" "right right"; column-gap: 14px; } .aep-cover-stack { width: clamp(100px, 30vw, 180px); } .aep-title-main { font-size: var(--font-size-xl); } /* AO shortens the EP nav to just "EP N" on mobile (desktop keeps "Prev:/Next:"). */ .aep-nav-word { display: none; } .aep-osh { max-width: none; } /* AO keeps the score group + radar on ONE row on mobile (don't stack). */ .aep-osh-main { gap: var(--spacing-md); } /* Countdown DHMS: AO renders the segments at 18px / separator 14px on mobile (its ≤480 tier) — the desktop 36px (font-size-4xl) overflows the row and collides with "Notify Me". AO shrinks again ≤380px (see below). */ .aep-countdown-seg { font-size: var(--font-size-lg); } .aep-countdown-sep { font-size: var(--font-size-sm); } /* Mobile section order after the Oshimeter: Episode Context → Readthrough → Episode Reviews (→ Weekly Verdict). Flatten .aep-main/.aep-sidebar with display:contents so the single-column grid can order their children directly, and drop the stats grid + embed (not shown on AO mobile). */ .aep-grid { grid-template-columns: minmax(0, 1fr); } /* force single column so flattened items stack full-width */ .aep-main, .aep-sidebar { display: contents; } .aep-context { order: 1; } .aer-section { order: 2; } /* Readthrough */ .aeq-section { order: 3; } /* Episode Reviews */ .aep-title-right { grid-area: auto; order: 4; } /* Weekly Verdict relocated into .aep-grid on mobile; clear the desktop "right" area so it doesn't spawn phantom grid columns */ .aep-legal { order: 5; } .aep-info-grid, .aep-embed { display: none; } } /* Narrow phones — AO's ≤380 countdown tier: segment 16px, separator 12px. */ @media (max-width: 380px) { .aep-countdown-seg { font-size: var(--font-size-base); } .aep-countdown-sep { font-size: var(--font-size-xs); } } /* ── Rate modal — mirrors animeoshi.com's QuickRating ─────────────── */ /* Backdrop mirrors animeoshi's Base modal .overlay: 80% black + blur (not the sitewide 60% --color-overlay), so the page behind the QuickRating dims fully. */ #ao-rate-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 210; align-items: center; justify-content: center; padding: var(--spacing-md); overflow-y: auto; } #ao-rate-modal.open { display: flex; } /* ───────────────────────────────────────────────────────────────────────── Precise sync map → animeoshi-web QuickRating (src/components/Modal/…). When those .module.css files change, re-diff against this block. .ao-rate-box → Base/base.module.css .modal.quickRating + Rating .container .ao-rate-header → QuickRating/quickRatingHeader.module.css .modalHeaderOverride .ao-rate-scroll → Rating .contentArea + quickRating .quickContent .ao-rate-footer → quickRating .footer .ao-rate-section* → quickRating .sectionHeader/.sectionTitle/.pointsBadge .ao-rate-stars → starRatingStep.module.css .ao-rate-review* → quickReviewStep.module.css .card/.textarea/.cardFooter .ao-rate-more → quickRating .moreOptions + .moreDetails rules .ao-rate-attr* → quickAttributeRatingStep.module.css .ao-rate-progress → quickRatingHeader .progressBar/.track/.marker .ao-rate-ep-pill → quickEpisodePicker.module.css .trigger Token scale (animeoshi src/styles/variables.css): sm8 md16 lg24 xl32 · xs12 sm14 md16 lg18 · radius md8 lg12 xl16 2xl21 4xl32 · weight medium500 semibold600. ───────────────────────────────────────────────────────────────────────── */ .ao-rate-box { display: flex; flex-direction: column; background: hsl(271, 42%, 8%); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-4xl); width: 100%; max-width: 440px; min-height: 420px; position: relative; box-shadow: var(--shadow-lg); box-sizing: border-box; max-height: 95vh; max-height: 95dvh; overflow: hidden; } /* Header (compact, fixed) — lighter surface, distinct from the darker body (mirrors animeoshi: header = --color-surface, body = --color-bg). */ /* Close is absolute (out of flow) like animeoshi's BaseModal closeWrapper, so the header height is driven by the title alone (~49px), not the 32px close button. padding-right = close clearance (--modal-close-inset 12 * 2 + 32 = 56px). Vertical padding is 20px (a touch taller than animeoshi's 16px spec, per request). */ .ao-rate-header { flex-shrink: 0; display: flex; align-items: center; padding: var(--spacing-mlg) 56px var(--spacing-mlg) var(--spacing-mlg); background: hsl(271, 35%, 13%); border-bottom: var(--border-normal) solid var(--color-border); } .ao-rate-title { margin: 0; font-size: var(--font-size-sm); line-height: normal; font-weight: var(--font-weight-normal); color: var(--pebble); } .ao-rate-close { position: absolute; top: var(--spacing-smd); right: var(--spacing-smd); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: none; background: rgba(237, 237, 237, 0.08); color: var(--pebble); cursor: pointer; flex-shrink: 0; z-index: 3; } .ao-rate-close:hover { background: rgba(237, 237, 237, 0.16); } /* Step = scrollable body + pinned footer, so the CTA is always visible. */ .ao-rate-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .ao-rate-step[hidden] { display: none; } .ao-rate-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-mlg) var(--spacing-mlg) var(--spacing-md); } .ao-rate-footer { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-mlg) var(--spacing-mlg); background: hsl(271, 42%, 8%); } /* Fade scrolling content into the footer's top edge (mirrors animeoshi's .footer::before). */ .ao-rate-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none; background: linear-gradient(to bottom, transparent, hsl(271, 42%, 8%)); } /* Mobile: the rating modal is a bottom sheet — full-width, pinned to the bottom, 90dvh tall, rounded top corners only (mirrors AO's BaseModal .modal.quickRating ≤640: overlay align-items:flex-end + sheet). The header/scroll/footer flex is already in place, so the content fills the sheet and scrolls internally. */ @media (max-width: 640px) { #ao-rate-modal { align-items: flex-end; padding: 0; } .ao-rate-box { max-width: none; width: 100%; min-height: 0; height: 90vh; height: 90dvh; max-height: 90vh; max-height: 90dvh; border-radius: var(--radius-4xl) var(--radius-4xl) 0 0; border-bottom: none; } } /* Mode toggle (Anime/Episode radios + episode pill) */ .ao-rate-modes { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); } .ao-rate-mode { display: inline-flex; align-items: center; gap: 10px; border: none; background: none; color: rgba(237, 237, 237, 0.75); font: inherit; font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); cursor: pointer; } .ao-rate-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(237, 237, 237, 0.3); box-sizing: border-box; flex-shrink: 0; position: relative; } .ao-rate-mode-active { color: var(--pebble); } .ao-rate-mode-active .ao-rate-radio { background: var(--ivory); border-color: var(--ivory); } .ao-rate-mode-active .ao-rate-radio::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170D21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .ao-rate-ep-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 5px 10px; min-width: 44px; border-radius: var(--radius-full); background: rgba(237, 237, 237, 0.06); color: var(--pebble); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 18px; } /* Section head (label + points pill) */ .ao-rate-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); } .ao-rate-section-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); } .ao-rate-aspects-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); } .ao-rate-pts-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-max); background: rgba(237, 237, 237, 0.06); color: var(--pebble); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .ao-rate-pts-star { width: 16px; height: 16px; flex-shrink: 0; display: block; object-fit: contain; } /* Large star picker (centered) */ .ao-rate-stars { --rate-pick: 44px; display: inline-flex; justify-content: center; gap: 10px; color: var(--pebble); align-self: center; } .ao-rate-slot { position: relative; width: var(--rate-pick); height: var(--rate-pick); flex-shrink: 0; } .ao-rate-slot .ao-rate-star { width: var(--rate-pick); height: var(--rate-pick); display: block; } .ao-rate-slot .ao-rate-star[fill="none"] { stroke: rgba(237, 237, 237, 0.4); } .ao-rate-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width 0.08s ease; } .ao-rate-fill .ao-rate-star { width: var(--rate-pick); } .ao-rate-half { position: absolute; top: 0; height: 100%; width: 50%; z-index: 2; cursor: pointer; } .ao-rate-half-l { left: 0; } .ao-rate-half-r { left: 50%; } .ao-rate-score { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-secondary); min-height: 16px; margin-top: calc(-1 * var(--spacing-sm)); } /* Click blink on the star row (mirrors animeoshi's starBlink). */ @keyframes ao-rate-star-blink { 0% { opacity: 1; } 20% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 100% { opacity: 1; } } .ao-rate-blink { animation: ao-rate-star-blink 500ms ease-in-out; } /* Review box + icon toolbar */ .ao-rate-review-box { border: var(--border-normal) solid rgba(237, 237, 237, 0.08); border-radius: var(--radius-xl); padding: 14px 14px 10px; background: rgba(237, 237, 237, 0.04); } .ao-rate-review { width: 100%; box-sizing: border-box; resize: none; min-height: 96px; border: none; background: none; color: var(--color-text-primary); font: inherit; font-size: var(--font-size-md); line-height: 1.5; } .ao-rate-review::placeholder { color: var(--color-text-secondary); } .ao-rate-review:focus { outline: none; } /* Toolbar items evenly distributed (mirrors animeoshi's space-around cardFooter). */ .ao-rate-review-toolbar { display: flex; align-items: center; justify-content: space-around; gap: var(--spacing-smd); margin-top: var(--spacing-sm); color: var(--color-text-secondary); } .ao-rate-tool { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: inherit; font: inherit; font-size: var(--font-size-sm); cursor: pointer; padding: 0; } .ao-rate-tool:hover { color: var(--pebble); } .ao-rate-tool-aa { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); } .ao-rate-spoiler-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(237, 237, 237, 0.45); box-sizing: border-box; } /* Active spoiler: only the dot turns accent; the label keeps its default color. */ .ao-rate-spoiler[aria-pressed="true"] .ao-rate-spoiler-dot { background: var(--color-accent); border-color: var(--color-accent); } .ao-rate-media-list { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .ao-rate-media-thumb { width: 56px; height: 56px; border-radius: var(--radius-md); overflow: hidden; background: rgba(237, 237, 237, 0.05); } .ao-rate-media-thumb img, .ao-rate-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Animated triple-caret scroll hint (mirrors animeoshi's scrollHintRow) */ .ao-rate-scrollhint { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-xs) 0; pointer-events: none; } .ao-rate-hint-caret { width: 16px; height: 16px; color: rgba(237, 237, 237, 0.55); animation: ao-rate-hint-cascade 1.4s ease-in-out infinite; transform: rotate(180deg); } .ao-rate-hint-caret + .ao-rate-hint-caret { margin-top: -7px; } .ao-rate-hint-1 { animation-delay: 0s; } .ao-rate-hint-2 { animation-delay: 0.2s; } .ao-rate-hint-3 { animation-delay: 0.4s; } .ao-rate-hint-up .ao-rate-hint-caret { transform: rotate(180deg); } .ao-rate-hint-up .ao-rate-hint-1 { animation-delay: 0.4s; } .ao-rate-hint-up .ao-rate-hint-3 { animation-delay: 0s; } @keyframes ao-rate-hint-cascade { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } } /* More Details (collapsible; holds watch date + radar + aspect stars) */ .ao-rate-more { border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-lg); background: rgba(237, 237, 237, 0.05); } .ao-rate-more-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); min-height: 50px; padding: var(--spacing-sm) var(--spacing-mlg) var(--spacing-sm) 15px; cursor: pointer; list-style: none; } .ao-rate-more-summary::-webkit-details-marker { display: none; } .ao-rate-more-heads { display: flex; flex-direction: column; line-height: 1.25; } .ao-rate-more-title { font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); color: var(--pebble); } .ao-rate-more-sub { font-size: var(--font-size-xs); line-height: 16px; color: rgba(237, 237, 237, 0.55); } .ao-rate-more-right { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-secondary); } /* Chevron points DOWN when collapsed, flips up when open (base path is right-facing). */ .ao-rate-more-chevron { transition: transform 0.15s ease; transform: rotate(90deg); } .ao-rate-more[open] .ao-rate-more-chevron { transform: rotate(-90deg); } .ao-rate-more-body { display: flex; flex-direction: column; gap: var(--spacing-md); padding: 0 var(--spacing-mlg) 15px 15px; } .ao-rate-field { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); min-height: 36px; padding: var(--spacing-sm) 0; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); } .ao-rate-field input[type="date"] { padding: 6px var(--spacing-smd); border-radius: var(--radius-max); border: 0; background: rgba(237, 237, 237, 0.06); color: var(--pebble); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; color-scheme: dark; } /* Aspects: radar + per-aspect half-star rows */ .ao-rate-radar { display: flex; justify-content: center; } .ao-rate-radar-svg { width: 140px; height: 140px; } .ao-rate-radar-grid { fill: none; stroke: rgba(237, 237, 237, 0.15); stroke-width: 0.5; } .ao-rate-radar-axis { stroke: rgba(237, 237, 237, 0.15); stroke-width: 0.5; } .ao-rate-radar-data { fill: var(--color-accent); fill-opacity: 0.18; stroke: var(--color-accent); stroke-width: 1.5; } .ao-rate-radar-label { font-size: 8px; fill: var(--color-text-secondary); } .ao-rate-attr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: 3px 0; } .ao-rate-attr-label { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); } .ao-rate-attr-stars { --attr-star: 32px; display: inline-flex; gap: 6px; color: var(--pebble); flex-shrink: 0; } .ao-rate-attr-slot { position: relative; width: var(--attr-star); height: var(--attr-star); } .ao-rate-attr-slot .ao-rate-astar { width: var(--attr-star); height: var(--attr-star); display: block; stroke: rgba(237, 237, 237, 0.4); } .ao-rate-attr-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width 0.08s ease; } .ao-rate-attr-fill .ao-rate-astar { width: var(--attr-star); stroke: none; } .ao-rate-attr-half { width: 50%; cursor: pointer; } /* Points progress bar */ .ao-rate-progress { display: flex; align-items: center; gap: var(--spacing-smd); } /* NOTE: no overflow:hidden here — unlike animeoshi (markers live in a separate layer), this SSG nests the 22px markers + Verified! badge inside the track, so clipping would hide them. The fill's own border-radius rounds its leading edge. */ .ao-rate-progress-track { position: relative; flex: 1; height: 10px; border-radius: var(--radius-max); background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18); } .ao-rate-progress-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-max) 0 0 var(--radius-max); background: linear-gradient(90deg, #a1862e 0%, #fdd835 5%, #fdd835 100%); transition: width 0.35s ease; } /* Fixed milestone markers (10/15/25/35) — reached ones light up, the highest reached gets the burst glow. The running total lives in the end pill only. */ .ao-rate-progress-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 22px; height: 22px; border-radius: var(--radius-max); background: #463d4e; color: rgba(237, 237, 237, 0.55); font-size: var(--font-size-xs); line-height: 14px; font-weight: var(--font-weight-bold); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.35s ease, color 0.35s ease; } .ao-rate-progress-mark-reached { background: #fdd835; color: var(--charcoal); } /* Leading (highest-reached) marker: animeoshi shows pulsing sun rays above it, with no glow ring on the marker itself (mirrors QuickRatingProgressBar). */ .ao-rate-progress-rays { position: absolute; bottom: calc(100% - 2px); left: 50%; width: 26px; height: 10px; transform: translateX(-50%); pointer-events: none; animation: ao-rate-sunshine 1.6s ease-in-out infinite; } @keyframes ao-rate-sunshine { 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(0.96); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } } /* Last marker (35) sits at left:100% — anchor its right edge to the track end (mirrors animeoshi's .markerLast) so the bar ends exactly at 35, not past it. */ .ao-rate-progress-mark-last { transform: translate(-100%, -50%); } /* "Verified!" badge — centered above the last milestone (35), 22px up, exactly like animeoshi's verifiedBadge (bottom: calc(100% + 22px); centered). It sits at the bar's top-right over the 35 marker; the 22px lift clears the total pill. */ .ao-rate-progress-verified { position: absolute; bottom: calc(100% + 22px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: var(--radius-full); background: linear-gradient(180deg, #ffe454 0%, #fdd835 100%); color: var(--charcoal); font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; box-shadow: 0 2px 8px rgba(253, 216, 53, 0.35); pointer-events: none; animation: ao-rate-verified-pop 0.4s ease-out; } /* [hidden] must win over the absolute-positioning rule above (rate.js toggles it). */ .ao-rate-progress-verified[hidden] { display: none; } @keyframes ao-rate-verified-pop { from { opacity: 0; filter: blur(6px); transform: translateX(-50%) translateY(4px) scale(0.85); } to { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(0) scale(1); } } .ao-rate-progress-total { flex-shrink: 0; } /* animeoshi's total is a plain label (star + number), NOT a filled pill — strip the pts-pill background/padding here (quickRatingHeader .totalLabel). */ .ao-rate-progress-total .ao-rate-pts-pill { background: transparent; padding: 0; gap: var(--spacing-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--pebble); } /* Continue / Skip */ .ao-rate-continue { width: 100%; height: 50px; border-radius: var(--radius-full); background: var(--pebble); color: var(--color-button-text); border: none; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); cursor: pointer; transition: opacity 0.15s ease; } .ao-rate-continue:hover:not(:disabled) { opacity: 0.85; } .ao-rate-continue:disabled { opacity: 0.4; cursor: default; } /* Captcha step */ .ao-rate-captcha-q { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--pebble); text-align: center; } .ao-rate-captcha-opts { display: flex; flex-direction: column; gap: var(--spacing-sm); } .ao-rate-captcha-opt { display: flex; align-items: center; gap: var(--spacing-md); text-align: left; padding: var(--spacing-md); border: var(--border-normal) solid rgba(237, 237, 237, 0.1); border-radius: var(--radius-lg); background: rgba(237, 237, 237, 0.05); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); cursor: pointer; } .ao-rate-captcha-opt:hover { background: rgba(237, 237, 237, 0.1); border-color: rgba(237, 237, 237, 0.2); } .ao-rate-captcha-opt-active { background: var(--pebble); border-color: var(--pebble); color: var(--color-button-text); } .ao-rate-captcha-tag { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.35); color: var(--pebble); font-weight: var(--font-weight-bold); flex-shrink: 0; } .ao-rate-captcha-opt-active .ao-rate-captcha-tag { background: var(--charcoal); color: var(--pebble); } /* The "Wrong answer" line — sits between the question and options (mirrors animeoshi's captchaStep .error: font-size sm, danger red, centered). */ .ao-rate-captcha-status { font-size: var(--font-size-sm); color: #f04141; text-align: center; margin: 0; } .ao-rate-captcha-status:empty { display: none; } .ao-rate-captcha-actions { display: flex; align-items: center; gap: var(--spacing-smd); } .ao-rate-skip { border: none; background: none; color: var(--pebble); font: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); cursor: pointer; padding: 0 var(--spacing-md); flex: 3 1 0; min-width: 0; } .ao-rate-captcha-actions .ao-rate-continue { flex: 7 1 0; min-width: 0; } /* Episode picker (the "N ▾" dropdown → "Select Episode" panel) */ .ao-rate-picker { display: flex; flex-direction: column; background: hsl(271, 42%, 8%); border: var(--border-normal) solid rgba(237, 237, 237, 0.1); border-radius: var(--radius-2xl); width: 100%; max-width: 440px; max-height: calc(100vh - 2 * var(--spacing-md)); max-height: calc(100dvh - 2 * var(--spacing-md)); box-shadow: var(--shadow-lg); box-sizing: border-box; overflow: hidden; text-align: left; } /* Compact header — centered title stack (close pinned top-right) + arc pills. */ .ao-rate-picker-head { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--spacing-md) var(--spacing-mlg); background: hsl(271, 35%, 13%); border-bottom: var(--border-normal) solid var(--color-border); } .ao-rate-picker-toprow { display: flex; justify-content: center; } .ao-rate-picker-titlestack { display: flex; flex-direction: column; align-items: center; text-align: center; } .ao-rate-picker-title { margin: 0; font-size: var(--font-size-base); line-height: 20px; font-weight: var(--font-weight-medium); color: var(--pebble); } .ao-rate-picker-sub { margin: 0; font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); color: rgba(237, 237, 237, 0.8); } .ao-rate-picker-head .ao-rate-close { position: absolute; top: var(--spacing-sm); right: var(--spacing-md); } .ao-rate-picker-pills { display: flex; flex-wrap: wrap; gap: 5px; } .ao-rate-picker-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--spacing-sm); border-radius: var(--radius-full); border: 0; background: rgba(237, 237, 237, 0.1); color: var(--pebble); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 16px; white-space: nowrap; cursor: pointer; } .ao-rate-picker-pill:hover { background: rgba(237, 237, 237, 0.12); } .ao-rate-picker-pill-active { background: var(--pebble); border-color: var(--pebble); color: var(--color-button-text); } .ao-rate-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .ao-rate-picker-loading { padding: var(--spacing-lg); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .ao-rate-picker-row { display: flex; align-items: center; gap: var(--spacing-md); width: 100%; text-align: left; padding: var(--spacing-sm) var(--spacing-lg); border: none; border-top: var(--border-normal) solid var(--color-border); background: none; color: var(--pebble); font: inherit; font-size: var(--font-size-sm); cursor: pointer; } .ao-rate-picker-row:hover { background: rgba(237, 237, 237, 0.04); } .ao-rate-picker-epnum { font-weight: var(--font-weight-medium); min-width: 50px; flex-shrink: 0; } .ao-rate-picker-eptitle { color: var(--pebble); } .ao-rate-picker-row-active .ao-rate-picker-eptitle { font-weight: var(--font-weight-bold); } /* The ep pill is a