/* ========================================================= WATCH THEME – BASE ========================================================= */ :root{ --w-ink-rgb: 255,255,255; --w-snow-rgb: 255,255,255; --w-bg-rgb: 0,0,0; --w-bg: #000; --w-menu-bg-rgb: 18,18,18; --w-menu-alpha: .92; --w-menu-shadow: 0 14px 40px rgba(0,0,0,.62); --w-menu-shadow-strong: 0 16px 50px rgba(0,0,0,.70); --w-panel: rgba(var(--w-ink-rgb),.06); --w-panel2: rgba(var(--w-ink-rgb),.04); --w-stroke: rgba(var(--w-ink-rgb),.10); --w-text: rgba(var(--w-ink-rgb),.92); --w-muted: rgba(var(--w-ink-rgb),.62); --w-accent: #5b6cff; --w-radius: 18px; --w-shadow: 0 14px 40px rgba(0,0,0,.45); } :root[data-watch-theme="light"]{ --w-ink-rgb: 0,0,0; --w-snow-rgb: 40,40,40; --w-bg: #f3f4f6; --w-bg-rgb: 255,255,255; --w-menu-bg-rgb: 255,255,255; --w-menu-alpha: .98; --w-menu-shadow: 0 14px 40px rgba(0,0,0,.18); --w-menu-shadow-strong: 0 16px 50px rgba(0,0,0,.22); --w-accent: #3b5bff; --w-shadow: 0 14px 40px rgba(0,0,0,.12); } /* Light theme panel tuning */ :root[data-watch-theme="light"] .watch-page{ background: rgba(var(--w-bg-rgb),.88); background-color: rgba(var(--w-bg-rgb),.88); border-color: rgba(var(--w-ink-rgb),.10); box-shadow: 0 14px 40px rgba(0,0,0,.10); } *{ box-sizing: border-box; } html, body{ background: var(--w-bg) !important; background-color: var(--w-bg) !important; color: var(--w-text); } body.watch-app{ margin:0; min-height:100vh; overflow-x:hidden; /* фикс горизонтального скролла страницы */ position: relative; /* for absolute snow layer */ background: var(--w-bg) !important; background-color: var(--w-bg) !important; color: var(--w-text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; } /* Small leave animation (used when opening /settings from the account menu) */ .watch-page{ transition: opacity .18s ease, transform .18s ease; } body.watch-leave .watch-page{ opacity: 0; transform: translateY(-4px); } /* Smooth theme switching */ :root{ --watch-theme-switch-ms: 560ms; --watch-theme-switch-ms-vt: 360ms; --watch-theme-switch-ease: cubic-bezier(.22,1,.36,1); } :root.watch-theme-anim body.watch-app, :root.watch-theme-anim body.watch-app *, :root.watch-theme-anim body.watch-app *::before, :root.watch-theme-anim body.watch-app *::after{ transition-property: background-color, color, border-color, box-shadow, text-shadow, fill, stroke, outline-color, backdrop-filter, -webkit-backdrop-filter; transition-duration: var(--watch-theme-switch-ms) !important; transition-timing-function: var(--watch-theme-switch-ease) !important; } /* Unified fade when switching theme (avoids per-element "desync") */ :root.watch-theme-vt *, :root.watch-theme-vt *::before, :root.watch-theme-vt *::after{ transition: none !important; } @media (prefers-reduced-motion: no-preference){ ::view-transition-old(root), ::view-transition-new(root){ animation-duration: var(--watch-theme-switch-ms-vt); animation-timing-function: var(--watch-theme-switch-ease); } ::view-transition-old(root){ animation-name: watch-vt-soft-out; } ::view-transition-new(root){ animation-name: watch-vt-soft-in; } @keyframes watch-vt-soft-out{ from{ opacity:1; filter:blur(0); } to{ opacity:0; filter:blur(.5px); } } @keyframes watch-vt-soft-in{ from{ opacity:0; filter:blur(.5px); } to{ opacity:1; filter:blur(0); } } } /* ========================================================= PAGE LOADER (blur + progress) ========================================================= */ .watch-loader{ position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(var(--w-bg-rgb), .22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 1; visibility: visible; transition: opacity .45s ease, visibility .45s ease; } body.watch-loaded .watch-loader{ opacity: 0; visibility: hidden; } .watch-loader__inner{ width: min(420px, 92vw); border-radius: 22px; border: 1px solid rgba(var(--w-ink-rgb), .12); background: rgba(var(--w-menu-bg-rgb), .72); box-shadow: var(--w-menu-shadow-strong); padding: 20px 22px 18px; text-align: center; } .watch-loader__brand{ display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .watch-loader__logo{ width: 180px; height: 48px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); } .watch-loader__spinner{ width: 44px; height: 44px; margin: 10px auto 12px; border-radius: 999px; border: 3px solid rgba(var(--w-ink-rgb), .16); border-top-color: rgba(var(--w-ink-rgb), .62); animation: watchSpin 1s linear infinite; } .watch-loader__text{ font-weight: 800; color: rgba(var(--w-ink-rgb), .86); font-size: 14px; letter-spacing: .2px; } .watch-loader__bar{ height: 8px; border-radius: 999px; margin-top: 14px; overflow: hidden; background: rgba(var(--w-ink-rgb), .10); } .watch-loader__barFill{ height: 100%; width: 10%; border-radius: 999px; background: rgba(var(--w-ink-rgb), .45); transition: width .18s ease; } @keyframes watchSpin{ to{ transform: rotate(360deg); } } /* ========================================================= LAYOUT ========================================================= */ .watch-layout{ display:flex; min-height:100vh; } /* NOTE: sidebar was removed from markup (logo is centered in topbar now). Keeping layout as a single-column app. */ /* ========================================================= CONTENT ========================================================= */ .watch-content{ flex:1; min-width:0; /* важно для flex: не даём детям раздувать ширину */ /* Header is fixed; reserve its height so content doesn't hide under it. JS sets --watch-topbar-h. */ padding: 0 16px 16px; padding-top: var(--watch-topbar-h, 72px); } /* ========================================================= TOPBAR ========================================================= */ .watch-topbar{ display:flex; align-items:center; justify-content:space-between; gap: 16px; /* add top padding back here (instead of the parent) */ padding: 16px 18px 14px 18px; /* always above the player */ position: fixed; top: 0; left: 0; right: 0; z-index: 12000; background: rgba(0,0,0,.68); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); } .watch-topbar__left{ display:flex; align-items:center; gap: 14px; flex:1; min-width:0; } /* centered brand like in the reference header */ .watch-brand{ flex: 0 0 auto; display:flex; align-items:center; justify-content:center; text-decoration:none; padding: 6px 10px; border-radius: 14px; } .watch-brand__img{ width: 220px; height: 60px; object-fit: contain; display:block; filter: drop-shadow(0 12px 26px rgba(0,0,0,.35)); transition:transform .18s ease; transform-origin:center; } .watch-brand:hover .watch-brand__img{transform:scale(1.08);} /* top buttons */ .watch-topnav{ display:flex; align-items:center; gap: 10px; } .watch-topnav__item{ display:inline-flex; align-items:center; gap: 10px; padding: 10px 14px; border-radius: 14px; text-decoration:none; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); color: var(--w-text); font-weight: 600; font-size: 13px; transition: background .15s ease, border-color .15s ease; } .watch-topnav__item:hover{ background: rgba(var(--w-ink-rgb),.07); border-color: rgba(var(--w-ink-rgb),.14); } .watch-topnav__text{ opacity:.92; } /* search button */ .watch-searchbtn{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; /* match the outline style of the "Аккаунт" button */ background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); color: var(--w-text); cursor: pointer; } .watch-searchbtn .watch-mi{ font-size: 28px; line-height: 1; } .watch-searchbtn:hover{ background: rgba(var(--w-ink-rgb),.07); border-color: rgba(var(--w-ink-rgb),.14); } /* right side */ .watch-topbar__right{ display:flex; align-items:center; gap: 10px; flex:1; min-width:0; justify-content:flex-end; } .watch-iconbtn{ color: rgba(var(--w-ink-rgb),.92); width: 40px; height: 40px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); text-decoration:none; } .watch-login{ display:flex; align-items:center; } /* ========================================================= PAGE PANEL ========================================================= */ .watch-page{ margin: 0 18px 0 18px; padding: 18px; border-radius: 22px; background: rgba(var(--w-ink-rgb),.03); background-color: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); box-shadow: var(--w-shadow); min-height: calc(100vh - 110px); } /* ========================================================= HOME BLOCKS ========================================================= */ .watch-home{ --watch-home-card-w: 220px; display:flex; flex-direction:column; gap: 22px; } .watch-block{} .watch-block__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; } .watch-block__title{ margin:0; font-size: 22px; font-weight: 700; } .watch-block__link{ font-size: 13px; color: var(--w-muted); text-decoration:none; } .watch-block__link:hover{ color: var(--w-text); } /* ========================================================= GRID + CARDS ========================================================= */ .watch-grid{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; } /* fallback for default shortstory */ .shortstory{ background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); border-radius: 16px; overflow:hidden; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1400px){ .watch-grid{ grid-template-columns: repeat(5,1fr); } } @media (max-width: 1200px){ .watch-grid{ grid-template-columns: repeat(4,1fr); } } @media (max-width: 980px){ .watch-grid{ grid-template-columns: repeat(3,1fr); } .watch-topnav__text{ display:none; } } @media (max-width: 720px){ .watch-grid{ grid-template-columns: repeat(2,1fr); } .watch-topnav{ display:none; } .watch-sidebar{ display:none; } } /* ===== Horizontal rail like your screenshot ===== */ .rail{ display:flex; gap: 14px; overflow-x: auto; overflow-y: visible; padding: 12px 2px 30px; scroll-snap-type: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } /* Hide native scrollbar (we use arrows) */ .rail::-webkit-scrollbar{ width: 0 !important; height: 0 !important; display: none !important; } /* card */ .mcard{ flex: 0 0 auto; width: 220px; /* portrait poster size */ scroll-snap-align: none; position: relative; transform-origin: center; transition: transform .18s ease; will-change: transform; z-index: 1; } /* Home rails: when effective viewport grows, posters can shrink a bit so more fit on screen. */ .watch-home .rail > .mcard{ flex-basis: var(--watch-home-card-w) !important; width: var(--watch-home-card-w) !important; } .mcard:hover{ transform: translateY(-2px); z-index: 12; } .mcard__link{ display:block; position: relative; text-decoration:none; color: inherit; } .mcard__textLayer{ position: absolute; inset: 1px; border-radius: 17px; overflow: hidden; pointer-events: none; z-index: 5; transform: translateZ(0) scale(1); transform-origin: center center; transition: transform .34s cubic-bezier(.22,1,.36,1); will-change: transform; } .mcard__img{ position:relative; width:100%; aspect-ratio: 2 / 3; /* poster */ border-radius: 18px; overflow:hidden; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); box-shadow: 0 16px 40px rgba(0,0,0,.35); transform: translateZ(0) scale(1); transform-origin: center center; transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1); will-change: transform, box-shadow; } .mcard__picture{ display:block; width:100%; height:100%; } .mcard__img img{ display:block; width:100% !important; height:100% !important; object-fit: cover !important; transform: none; transition: transform .25s ease; } .mcard__shadow{ display:none; } /* hover overlay (description) */ .mcard__overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; /* keep the same look, but avoid 1px seams by not moving the background layer */ opacity: 0; transition: none; pointer-events: none; transform: none; border-radius: inherit; overflow: hidden; } .mcard__overlay::before{ content: ""; position: absolute; inset: 0; /* Keep top area clear (bookmark/rating), darken lower area for text readability */ background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.56) 72%, rgba(0,0,0,.74) 100% ); } .mcard__overlayBody{ position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: none; transition: none; transition-delay: 0s; will-change: opacity; } .mcard__overlayTitle{ font-size: 13px; font-weight: 800; line-height: 1.2; color: #fff; text-shadow: 0 6px 20px rgba(0,0,0,.55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mcard__overlayDesc{ font-size: 12px; line-height: 1.35; /* keep readable on both themes (overlay is dark) */ color: rgba(255,255,255,.92); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: none !important; } /* ---- Hotfix: poster hover typography (keep title white, size unchanged) ---- */ .mcard__overlayTitle{ font-size: 13px !important; color: #fff !important; } .mcard__overlayDesc{ /* keep the description tone as-is */ color: rgba(255,255,255,.92) !important; } /* ---- Hotfix: /settings borderless (only settings page) ---- */ html.watch-settings-page .watch-settings__card, html.watch-settings-page .watch-settings__top, html.watch-settings-page .watch-settings__tab, html.watch-settings-page .watch-settings__input, html.watch-settings-page .watch-settings__textarea, html.watch-settings-page .watch-settings__avatar, html.watch-settings-page .watch-settings__mediaBtn{ border: 0 !important; } html.watch-settings-page .watch-settings__top{ border-bottom: 0 !important; } html.watch-settings-page .watch-settings__input:focus, html.watch-settings-page .watch-settings__textarea:focus{ box-shadow: 0 0 0 2px rgba(var(--w-ink-rgb),.18) !important; } .mcard:hover .mcard__overlay, .mcard:focus-within .mcard__overlay{ opacity: 1; } .mcard:hover .mcard__overlayBody, .mcard:focus-within .mcard__overlayBody{ opacity: 1; transform: none; transition-delay: 0s; } .mcard:hover .mcard__title, .mcard:focus-within .mcard__title{ opacity: 0; transform: none !important; visibility: hidden; } .mcard__title{ position:absolute; left: 12px; right: 12px; bottom: 10px; font-size: 13px; font-weight: 700; line-height: 1.2; text-shadow: 0 4px 18px rgba(0,0,0,.55); /* keep poster title color consistent in both themes */ color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 1; visibility: visible; transform: none; transition: none; transition-delay: 0s; will-change: opacity; } .mcard__title, .mcard__overlayTitle, .mcard__overlayDesc{ -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; backface-visibility: hidden; } .mcard__badges{ position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; align-items: center; z-index: 4; } .mcard__badges .mcard__badge{ position: static; top: auto; left: auto; right: auto; } .mcard__badges .mcard__badge--4k{ width: 30px; height: 30px; } .mcard__badge{ position:absolute; top: 10px; left: 10px; padding: 4px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(145, 205, 165, .78); color: #0b0f1a; box-shadow: 0 10px 22px rgba(0,0,0,.35); } /* Red 4K badge (shown when item is in the 4K category) */ .mcard__badge--4k{ left: auto; right: 10px; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(220, 95, 95, .82); color: #fff; font-weight: 900; letter-spacing: -0.2px; } .mcard__badge--alt{ background: rgba(255, 220, 120, .90); } /* hover */ .mcard:hover .mcard__img img, .mcard__img:hover img{ transform: scale(1.035); } /* responsive size */ @media (hover:none) and (pointer:coarse){ .rail{ scroll-snap-type: x mandatory; } .mcard{ scroll-snap-align: start; } } @media (max-width: 980px){ .watch-home{ --watch-home-card-w: 190px; } .mcard{ width: 190px; } } @media (max-width: 640px){ .watch-home{ --watch-home-card-w: 165px; } .mcard{ width: 165px; } } /* ===== Mark (watching / planned / postponed / dropped) ===== */ .mcard__markWrap{ position: absolute; top: 10px; right: 10px; z-index: 6; } .mcard__markBtn{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 999px; background: rgba(var(--w-bg-rgb),.55); border: 1px solid rgba(var(--w-ink-rgb),.14); color: rgba(var(--w-ink-rgb),.92); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 22px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease, border-color .15s ease; } .mcard__markBtn:hover{ transform: scale(1.03); background: rgba(0,0,0,.65); border-color: rgba(var(--w-ink-rgb),.20); } .mcard__markBtn .watch-mi{ font-size: 20px; line-height: 1; } .mcard__markText{ font-size: 12px; font-weight: 800; letter-spacing: .2px; opacity: .95; } .mcard__markMenu{ position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 10px; border-radius: 16px; border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); background-color: rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--w-menu-shadow-strong); opacity: 0; transform: translateY(-6px); transform-origin: top right; pointer-events: none; transition: opacity .18s ease, transform .18s ease; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility; } .mcard__markWrap.is-open .mcard__markMenu{ opacity: 1; transform: none; pointer-events: auto; } .mcard__markItem{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; color: rgba(var(--w-ink-rgb),.92); font-weight: 700; cursor: pointer; text-align: left; } .mcard__markItem:hover{ background: rgba(var(--w-ink-rgb),.07); } .mcard__markDot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(var(--w-ink-rgb),.30); box-shadow: 0 0 0 4px rgba(var(--w-ink-rgb),.05); } .mcard__markDot--watching{ background: rgba(120,255,170,.92); } .mcard__markDot--planned{ background: rgba(120,200,255,.92); } .mcard__markDot--postponed{ background: rgba(255,220,120,.92); } .mcard__markDot--watched{ background: rgba(190,150,255,.92); } .mcard__markDot--dropped{ background: rgba(255,110,110,.92); } .mcard__markFooter{ margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(var(--w-ink-rgb),.10); } .mcard__markClear{ width: 100%; display: flex; align-items: center; justify-content: center; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.04); color: rgba(var(--w-ink-rgb),.80); font-weight: 800; cursor: pointer; } .mcard__markClear:hover{ background: rgba(var(--w-ink-rgb),.07); } /* Fullstory mark control */ .watch-mark{ display: inline-flex; position: relative; } .watch-mark__btn{ display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.04); color: rgba(var(--w-ink-rgb),.92); font-weight: 800; cursor: pointer; } .watch-mark__btn:hover{ background: rgba(var(--w-ink-rgb),.07); border-color: rgba(var(--w-ink-rgb),.18); } .watch-mark__menu{ position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; padding: 10px; border-radius: 16px; border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); background-color: rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--w-menu-shadow-strong); opacity: 0; transform: translateY(-6px); transform-origin: top right; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 40; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility; } .watch-mark.is-open .watch-mark__menu{ opacity: 1; transform: none; pointer-events: auto; } .watch-mark__item{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; color: rgba(var(--w-ink-rgb),.92); font-weight: 700; cursor: pointer; text-align: left; } .watch-mark__item:hover{ background: rgba(var(--w-ink-rgb),.07); } /* Watch status in "Действия" (fullstory) */ .watch-mark--side{ width: 100%; } .watch-mark__btn--side{ width: 100%; justify-content: flex-start; } .watch-mark__chev{ margin-left: auto; opacity: .65; } .watch-mark__menu--side{ left: 0; right: 0; min-width: 0; } /* Button label colors */ .watch-mark[data-watch-status="none"] .watch-mark__text{ color: rgba(var(--w-ink-rgb),.60); } .watch-mark[data-watch-status="watching"] .watch-mark__text{ color: rgba(120,255,170,.95); } .watch-mark[data-watch-status="planned"] .watch-mark__text{ color: rgba(120,200,255,.95); } .watch-mark[data-watch-status="postponed"] .watch-mark__text{ color: rgba(255,220,120,.95); } .watch-mark[data-watch-status="watched"] .watch-mark__text{ color: rgba(190,150,255,.95); } .watch-mark[data-watch-status="dropped"] .watch-mark__text{ color: rgba(255,110,110,.95); } /* Button border tint when selected */ .watch-mark[data-watch-status="watching"] .watch-mark__btn{ border-color: rgba(120,255,170,.35); background: rgba(120,255,170,.08); } .watch-mark[data-watch-status="planned"] .watch-mark__btn{ border-color: rgba(120,200,255,.35); background: rgba(120,200,255,.08); } .watch-mark[data-watch-status="postponed"] .watch-mark__btn{ border-color: rgba(255,220,120,.35); background: rgba(255,220,120,.08); } .watch-mark[data-watch-status="watched"] .watch-mark__btn{ border-color: rgba(190,150,255,.35); background: rgba(190,150,255,.08); } .watch-mark[data-watch-status="dropped"] .watch-mark__btn{ border-color: rgba(255,110,110,.35); background: rgba(255,110,110,.08); } /* Menu items (account-like dropdown, but with status colors) */ .watch-mark__item{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 0; background: transparent; color: rgba(var(--w-ink-rgb),.94); font-weight: 600; letter-spacing: .2px; cursor: pointer; text-align: left; } .watch-mark__item .material-icons-outlined{ font-size: 20px; opacity: .95; } .watch-mark__item:hover{ background: rgba(var(--w-ink-rgb),.07); } /* Status accent colors */ .watch-mark__item[data-status="watching"]{ color: rgba(120,255,170,.95); } .watch-mark__item[data-status="planned"]{ color: rgba(120,200,255,.95); } .watch-mark__item[data-status="postponed"]{ color: rgba(255,220,120,.95); } .watch-mark__item[data-status="watched"]{ color: rgba(190,150,255,.95); } .watch-mark__item[data-status="dropped"]{ color: rgba(255,110,110,.95); } .watch-mark__item--muted{ color: rgba(var(--w-ink-rgb),.78); } .watch-mark__item--muted:hover{ background: rgba(var(--w-ink-rgb),.06); } .watch-mark__sep{ height:1px; margin:8px 10px; background: rgba(var(--w-ink-rgb),.10); } /* === Unified bookmark typography (card btn + menu + fullstory mark) === */ .mcard__markItem, .watch-mark__item{ font-size:14px !important; line-height:1.2 !important; font-weight:500 !important; letter-spacing:.15px !important; padding:13px 15px !important; gap:12px !important; } .mcard__markItem{ padding:12px 14px !important; } .mcard__markText, .watch-mark[data-watch-status] .watch-mark__text{ font-size:13px !important; font-weight:500 !important; letter-spacing:.1px !important; line-height:1 !important; } .watch-mark__btn{ font-size:13px !important; font-weight:500 !important; letter-spacing:.1px !important; } /* === Snow overlay (seasonal effect) === */ .watch-snow{ position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8000; opacity: .9; } @media (prefers-reduced-motion: reduce){ html:not([data-watch-snow="on"]) .watch-snow{ display: none !important; } } html[data-watch-snow="off"] .watch-snow{ display:none !important; } html[data-watch-snow="on"] .watch-snow{ display:block !important; } /* Library page */ .watch-library{ padding: 8px; } .watch-library__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .watch-library__title{ margin: 0; font-size: 26px; font-weight: 800; } .watch-library__subtitle{ color: rgba(var(--w-ink-rgb),.62); font-size: 13px; } .watch-library__section{ margin-top: 18px; padding: 16px; border-radius: 18px; border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-ink-rgb),.03); } .watch-library__sectionHead{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .watch-library__sectionTitle{ margin: 0; font-size: 18px; font-weight: 800; } .watch-library__filters{ display: flex; flex-wrap: wrap; gap: 8px; } .watch-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-ink-rgb),.04); color: rgba(var(--w-ink-rgb),.86); font-weight: 800; font-size: 12px; cursor: pointer; user-select: none; } .watch-chip:hover{ background: rgba(var(--w-ink-rgb),.07); } .watch-chip.is-active{ background: rgba(91,108,255,.18); border-color: rgba(91,108,255,.35); } .watch-library__list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* Library groups (Смотрю / Просмотрено / …) */ .watch-library__group{ margin-top: 14px; } .watch-library__groupHead{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin: 6px 2px 10px; } .watch-library__groupTitle{ font-weight: 900; color: var(--w-text); } .watch-library__groupCount{ font-size: 12px; color: rgba(var(--w-ink-rgb),.68); font-weight: 800; } @media (max-width: 980px){ .watch-library__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px){ .watch-library__list{ grid-template-columns: 1fr; } } .watch-rowCard{ display: flex; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-ink-rgb),.03); text-decoration: none; color: rgba(var(--w-ink-rgb),.92); transition: transform .15s ease, background .15s ease, border-color .15s ease; } .watch-rowCard:hover{ transform: translateY(-2px); background: rgba(var(--w-ink-rgb),.05); border-color: rgba(var(--w-ink-rgb),.16); } .watch-rowCard__thumb{ width: 140px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: rgba(var(--w-ink-rgb),.04); flex: 0 0 auto; } .watch-rowCard__thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; } .watch-rowCard__meta{ min-width: 0; display:flex; flex-direction: column; justify-content: center; gap: 6px; } .watch-rowCard__name{ font-weight: 900; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .watch-rowCard__sub{ color: rgba(var(--w-ink-rgb),.62); font-size: 12px; display:flex; align-items:center; gap:8px; } .watch-empty{ padding: 16px; border-radius: 16px; border: 1px dashed rgba(var(--w-ink-rgb),.16); color: rgba(var(--w-ink-rgb),.70); background: rgba(var(--w-ink-rgb),.02); } /* ========================================================= ACCOUNT / PROFILE (userinfo) – make it match dark watch style ========================================================= */ .watch-page .box.story{ background: transparent; border: 0; box-shadow: none; } .watch-page .box_in{ background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); border-radius: 18px; color: var(--w-text); } .watch-page .box_in.dark_top{ background: rgba(var(--w-ink-rgb),.06); } .watch-page .title.user_tab a, .watch-page .title.user_tab li{ color: var(--w-text); } .watch-page .title.user_tab li.active a{ color: var(--w-text); } .watch-page .usinf li{ border-color: rgba(var(--w-ink-rgb),.10); } .watch-page .ui-c1.grey{ color: rgba(var(--w-ink-rgb),.62); } .watch-page .heading{ color: var(--w-text); } .watch-page .ui-form input.wide, .watch-page .ui-form textarea.wide, .watch-page .ui-form select{ background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.12); color: var(--w-text); border-radius: 14px; } .watch-page .ui-form input.wide:focus, .watch-page .ui-form textarea.wide:focus, .watch-page .ui-form select:focus{ outline: none; border-color: rgba(91,108,255,.55); box-shadow: 0 0 0 3px rgba(91,108,255,.18); } /* New profile layout (centered, like the reference) */ .watch-profile{ width: min(980px, calc(100vw - 32px)); margin: 0 auto; padding: 18px 0 64px; } .watch-profile__card{ position: relative; border-radius: 28px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.03); box-shadow: 0 18px 60px rgba(0,0,0,.35); overflow: hidden; } .watch-profile__cover{ height: 240px; /* Solid cover (no gradients) */ background: rgba(var(--w-ink-rgb), .06); } html[data-watch-theme="light"] .watch-profile__cover{ background: rgba(0,0,0,.06); } .watch-profile__head{ display: flex; align-items: center; gap: 18px; padding: 0 22px 22px; margin-top: -58px; /* overlap avatar onto cover */ position: relative; } .watch-profile__avatar{ width: 118px; height: 118px; border-radius: 999px; padding: 6px; background: rgba(var(--w-bg-rgb),1); box-shadow: 0 12px 40px rgba(0,0,0,.45); flex: 0 0 auto; } .watch-profile__avatarImg{ display: block; width: 100%; height: 100%; border-radius: 999px; background-size: cover; background-position: center; background-color: rgba(var(--w-ink-rgb),.08); } .watch-profile__meta{ padding: 0; text-align: left; } .watch-profile__name{ margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .2px; color: var(--w-text); } .watch-profile__sub{ margin-top: 10px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; color: rgba(var(--w-ink-rgb),.68); font-size: 13px; } /* Status/role chips (with a small dot) */ .watch-profile__chip, .watch-profile__badge{ --chip-rgb: var(--w-ink-rgb); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--chip-rgb),.26); background: rgba(var(--chip-rgb),.10); color: rgba(var(--chip-rgb),.92); font-weight: 700; line-height: 1; user-select: none; } .watch-chip__dot{ width: 8px; height: 8px; border-radius: 999px; background: currentColor; opacity: .92; flex: 0 0 auto; } .watch-profile__chip--online{ --chip-rgb: 90, 220, 120; } .watch-profile__chip--offline{ --chip-rgb: 255, 95, 95; } .watch-role__label, .watch-role__label a, .watch-role__label span{ color: inherit; text-decoration: none; } html[data-watch-theme="light"] .watch-profile__chip, html[data-watch-theme="light"] .watch-profile__badge{ border-color: rgba(var(--chip-rgb),.30); background: rgba(var(--chip-rgb),.08); color: rgba(var(--chip-rgb),.88); } /* Hide DLE info boxes ("Информация ...") on profile page */ html.watch-userinfo .box.berrors.fix_grid{ display:none !important; } html.watch-userinfo .box.berrors{ display:none !important; } html.watch-userinfo .box.binfo.fix_grid{ display:none !important; } html.watch-userinfo .box.binfo{ display:none !important; } html.watch-userinfo .box.bsuccess.fix_grid{ display:none !important; } html.watch-userinfo .box.bsuccess{ display:none !important; } html.watch-userinfo .box.bwarning.fix_grid{ display:none !important; } html.watch-userinfo .box.bwarning{ display:none !important; } html.watch-userinfo .dle-info{ display:none !important; } .watch-profile__sep{ opacity: .55; } .watch-profile__section{ margin-top: 18px; border-radius: 22px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.03); padding: 18px; } /* ========================= Settings page (do=profile) ========================= */ .watch-auth-please{ padding: 120px 16px 60px; display: flex; justify-content: center; } .watch-auth-please__card{ width: min(520px, 100%); border-radius: 24px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.04); padding: 22px; } .watch-auth-please__title{ font-size: 22px; font-weight: 800; color: var(--w-text); } .watch-auth-please__text{ margin-top: 8px; margin-bottom: 16px; color: rgba(var(--w-ink-rgb),.78); } .watch-settings{ padding: 92px 16px 70px; max-width: 1220px; margin: 0 auto; } .watch-settings__card{ border-radius: 26px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.03); box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; } /* Entrance animation for /settings */ html.watch-settings-page .watch-settings__card{ animation: watchSettingsIn .28s ease both; } @keyframes watchSettingsIn{ from{ opacity: 0; transform: translateY(10px) scale(.985); } to{ opacity: 1; transform: translateY(0) scale(1); } } html[data-watch-theme="light"] .watch-settings__card{ box-shadow: 0 18px 50px rgba(0,0,0,.12); } .watch-settings__top{ padding: 22px 24px; border-bottom: 1px solid rgba(var(--w-ink-rgb),.10); } .watch-settings__title{ margin: 0; font-size: 22px; font-weight: 900; color: var(--w-text); } .watch-settings__hint{ margin-top: 6px; color: rgba(var(--w-ink-rgb),.70); font-size: 13px; } .watch-settings__grid{ display: grid; grid-template-columns: 260px 1fr; min-height: 420px; } @media (max-width: 860px){ .watch-settings__grid{ grid-template-columns: 1fr; } } .watch-settings__tabs{ padding: 14px; border-right: 1px solid rgba(var(--w-ink-rgb),.10); display: flex; flex-direction: column; gap: 8px; } @media (max-width: 860px){ .watch-settings__tabs{ border-right: none; border-bottom: 1px solid rgba(var(--w-ink-rgb),.10); flex-direction: row; overflow: auto; } } .watch-settings__tab{ width: 100%; text-align: left; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.04); color: rgba(var(--w-ink-rgb),.85); font-weight: 800; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; } .watch-settings__tab:hover{ transform: translateY(-1px); } .watch-settings__tab.is-active{ background: rgba(var(--w-ink-rgb),.08); border-color: rgba(var(--w-ink-rgb),.22); color: var(--w-text); } .watch-settings__panes{ padding: 18px; } .watch-settings__pane{ display:none; } .watch-settings__pane.is-active{ display:block; } .watch-settings__section{ border-radius: 22px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.02); padding: 18px; } .watch-settings__sectionTitle{ font-weight: 900; color: var(--w-text); margin-bottom: 12px; } .watch-settings__form{ display: grid; gap: 14px; } .watch-settings__row{ display: grid; gap: 8px; } .watch-settings__row--switch{ grid-template-columns: 1fr auto; align-items: center; } .watch-settings__label{ color: rgba(var(--w-ink-rgb),.82); font-weight: 800; font-size: 13px; } .watch-settings__input, .watch-settings__textarea{ width: 100%; border-radius: 16px; border: 1px solid rgba(var(--w-ink-rgb),.14); background: rgba(var(--w-ink-rgb),.04); color: var(--w-text); padding: 12px 12px; outline: none; } .watch-settings__textarea{ resize: vertical; } .watch-settings__input:focus, .watch-settings__textarea:focus{ border-color: rgba(var(--w-ink-rgb),.28); background: rgba(var(--w-ink-rgb),.06); } .watch-settings__muted{ color: rgba(var(--w-ink-rgb),.60); font-size: 12px; } .watch-settings__avatarRow{ display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; } .watch-settings__avatar{ width: 56px; height: 56px; border-radius: 999px; border: 2px solid rgba(var(--w-ink-rgb),.20); background-size: cover; background-position: center; background-color: rgba(var(--w-ink-rgb),.08); } .watch-settings__file{ width: 100%; } .watch-settings__actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .watch-settings__note{ margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(var(--w-ink-rgb),.10); color: rgba(var(--w-ink-rgb),.66); font-size: 12px; } /* Switch */ .watch-switch{ position: relative; display:inline-flex; } .watch-switch input{ position:absolute; opacity:0; width:1px; height:1px; } .watch-switch__ui{ width: 50px; height: 28px; border-radius: 999px; border: 1px solid rgba(var(--w-ink-rgb),.18); background: rgba(var(--w-ink-rgb),.06); display: inline-flex; align-items: center; padding: 3px; transition: background-color .18s ease, border-color .18s ease; } .watch-switch__ui::after{ content:""; width: 22px; height: 22px; border-radius: 999px; background: rgba(var(--w-ink-rgb),.90); transform: translateX(0); transition: transform .18s ease; } .watch-switch input:checked + .watch-switch__ui{ background: rgba(90, 220, 120, .18); border-color: rgba(90, 220, 120, .32); } .watch-switch input:checked + .watch-switch__ui::after{ transform: translateX(22px); } .watch-profile__h{ margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--w-text); } .watch-profile__text{ color: rgba(var(--w-ink-rgb),.82); line-height: 1.55; white-space: pre-line; } @media (max-width: 560px){ .watch-profile__cover{ height: 210px; } .watch-profile__head{ margin-top: -52px; padding: 0 16px 18px; gap: 14px; } .watch-profile__avatar{ width: 108px; height: 108px; } .watch-profile__name{ font-size: 22px; } } /* ========================================================= SEARCH MODAL ========================================================= */ html.watch-modal-open, html.watch-modal-open body{ overflow: hidden; } .watch-searchmodal{position:fixed;inset:0;z-index:999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s;} .watch-searchmodal.is-open{ display: block; } .watch-searchmodal__overlay{ transition: opacity .18s ease; opacity:0; position: absolute; inset: 0; background: rgba(0,0,0,.75); ;opacity:0;transition:opacity .2s ease;} .watch-searchmodal__panel{ position: relative; width: min(980px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px)); margin: 16px auto; background: rgba(var(--w-bg-rgb),.92); border: 1px solid rgba(var(--w-ink-rgb),.12); border-radius: 22px; box-shadow: 0 18px 60px rgba(0,0,0,.8); display: flex; flex-direction: column; overflow: hidden; ;transform:translateY(12px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease;} .watch-searchmodal__top{ display:flex; gap: 12px; align-items:center; padding: 14px 14px; border-bottom: 1px solid rgba(var(--w-ink-rgb),.10); } .watch-searchmodal__top--auth{justify-content:center;} .watch-searchmodal__form{ flex: 1; display:flex; align-items:center; gap: 10px; background: rgba(var(--w-ink-rgb),.06); border: 1px solid rgba(var(--w-ink-rgb),.12); border-radius: 16px; padding: 10px 12px; } .watch-searchmodal__input{ flex:1; background: transparent; border: 0; outline: 0; color: var(--w-text); font-size: 16px; } .watch-searchmodal__go{ width: 38px; height: 38px; border-radius: 12px; background: rgba(var(--w-ink-rgb),.08); border: 1px solid rgba(var(--w-ink-rgb),.12); color: var(--w-text); cursor: pointer; display:flex; align-items:center; justify-content:center; } .watch-searchmodal__go .watch-mi{ font-size: 24px; } .watch-searchmodal__close{ width: 46px; height: 46px; border-radius: 16px; background: rgba(var(--w-ink-rgb),.06); border: 1px solid rgba(var(--w-ink-rgb),.12); color: var(--w-text); cursor: pointer; display:flex; align-items:center; justify-content:center; } .watch-searchmodal__body{ flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; } .watch-searchmodal__results{ min-width: 0; padding: 14px; overflow: auto; } .watch-searchmodal__filters{ border-left: 1px solid rgba(var(--w-ink-rgb),.10); padding: 14px; overflow: auto; } .watch-searchmodal__filtersTitle{ font-size: 18px; font-weight: 800; margin: 2px 0 12px; } .watch-searchmodal__filterGroup{ display:flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .watch-searchmodal__filterLabel{ font-size: 14px; font-weight: 700; opacity: .9; } .watch-check{ display:flex; align-items:center; gap: 10px; font-size: 14px; color: rgba(var(--w-ink-rgb),.9); } .watch-check input{ width: 18px; height: 18px; accent-color: var(--w-text); } .watch-searchmodal__reset{ width: 100%; padding: 11px 12px; border-radius: 999px; background: rgba(var(--w-ink-rgb),.08); border: 1px solid rgba(var(--w-ink-rgb),.12); color: var(--w-text); cursor: pointer; } .watch-searchmodal__hint{ color: rgba(var(--w-ink-rgb),.65); padding: 6px 2px; } .watch-searchmodal__list{ display:flex; flex-direction: column; gap: 10px; } .watch-searchmodal__item{ display:flex; gap: 12px; padding: 10px; border-radius: 18px; text-decoration:none; color: var(--w-text); border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-ink-rgb),.05); } .watch-searchmodal__item:hover{ background: rgba(var(--w-ink-rgb),.08); border-color: rgba(var(--w-ink-rgb),.14); } .watch-searchmodal__thumb{ width: 44px; height: 64px; border-radius: 12px; background: rgba(var(--w-ink-rgb),.08); border: 1px solid rgba(var(--w-ink-rgb),.10); flex: 0 0 auto; } .watch-searchmodal__thumb img{ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .watch-searchmodal__name{ font-weight: 800; line-height: 1.2; } @media (max-width: 860px){ .watch-searchmodal__body{ grid-template-columns: 1fr; } .watch-searchmodal__filters{ border-left: 0; border-top: 1px solid rgba(var(--w-ink-rgb),.10); } } /* ========================================================= FOOTER ========================================================= */ .watch-footer{ margin: 16px 18px 22px; text-align: center; color: rgba(var(--w-ink-rgb),.65); font-size: 13px; } /* ========================================================= SEARCH MODAL ========================================================= */ html.watch-modal-open, html.watch-modal-open body{ overflow: hidden; } .watch-searchmodal{ position: fixed; inset: 0; z-index: 9999; display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; } .watch-searchmodal.is-open{ display: block; } .watch-searchmodal__overlay{ transition: opacity .18s ease; opacity:0; position: absolute; inset: 0; background: rgba(var(--w-bg-rgb),.72); } .watch-searchmodal__panel{ position: relative; width: min(980px, calc(100vw - 28px)); height: min(720px, calc(100vh - 28px)); margin: 14px auto; border-radius: 18px; background: rgba(var(--w-bg-rgb),.92); border: 1px solid rgba(var(--w-ink-rgb),.14); box-shadow: 0 22px 60px rgba(0,0,0,.65); display: flex; flex-direction: column; overflow: hidden; } .watch-searchmodal__top{ display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid rgba(var(--w-ink-rgb),.12); } .watch-searchmodal__form{ flex: 1; display:flex; align-items:center; gap: 12px; } .watch-searchmodal__input{ flex: 1; height: 48px; padding: 0 14px; border-radius: 14px; background: rgba(var(--w-ink-rgb),.06); border: 1px solid rgba(var(--w-ink-rgb),.14); color: var(--w-text); outline: none; font-size: 15px; } .watch-searchmodal__go{ width: 38px; height: 38px; border-radius: 999px; background: rgba(var(--w-ink-rgb),.06); border: 1px solid rgba(var(--w-ink-rgb),.14); color: var(--w-text); cursor: pointer; display:flex; align-items:center; justify-content:center; } .watch-searchmodal__go .watch-mi{ font-size: 24px; } .watch-searchmodal__close{ width: 48px; height: 48px; border-radius: 14px; background: transparent; border: 1px solid rgba(var(--w-ink-rgb),.14); color: var(--w-text); cursor: pointer; display:flex; align-items:center; justify-content:center; } .watch-searchmodal__body{ flex: 1; display: grid; grid-template-columns: 1fr 320px; min-height: 0; } .watch-searchmodal__results{ min-width: 0; padding: 16px; overflow: auto; } .watch-searchmodal__hint{ color: rgba(var(--w-ink-rgb),.65); font-size: 14px; padding: 6px 4px; } .watch-searchmodal__list{ display:flex; flex-direction:column; gap: 10px; } .watch-searchmodal__item{ display:flex; align-items:center; gap: 12px; padding: 10px; border-radius: 14px; text-decoration:none; color: var(--w-text); background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.10); } .watch-searchmodal__item:hover{ background: rgba(var(--w-ink-rgb),.08); } .watch-searchmodal__thumb{ width: 42px; height: 60px; border-radius: 10px; background: rgba(var(--w-ink-rgb),.10); } .watch-searchmodal__name{ font-weight: 700; font-size: 14px; line-height: 1.25; } .watch-searchmodal__filters{ padding: 16px; border-left: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-bg-rgb),.92); overflow: auto; } .watch-searchmodal__filtersTitle{ font-weight: 800; font-size: 18px; margin-bottom: 14px; } .watch-searchmodal__filterGroup{ display:flex; flex-direction:column; gap: 10px; } .watch-searchmodal__filterLabel{ color: rgba(var(--w-ink-rgb),.75); font-weight: 700; margin-bottom: 2px; } .watch-check{ display:flex; align-items:center; gap: 10px; color: var(--w-text); font-size: 14px; } .watch-check input{ width: 16px; height: 16px; } .watch-searchmodal__reset{ margin-top: 18px; width: 100%; height: 40px; border-radius: 999px; background: rgba(var(--w-ink-rgb),.06); border: 1px solid rgba(var(--w-ink-rgb),.14); color: var(--w-text); cursor: pointer; } @media (max-width: 880px){ .watch-searchmodal__panel{ width: calc(100vw - 16px); height: calc(100vh - 16px); margin: 8px; } .watch-searchmodal__body{ grid-template-columns: 1fr; } .watch-searchmodal__filters{ display:none; } } /* ========================================================= FOOTER ========================================================= */ .watch-footer{ padding: 14px 18px; margin: 10px 18px 18px; border-radius: 18px; border: 1px solid rgba(var(--w-ink-rgb),.08); background: rgba(var(--w-ink-rgb),.03); text-align: center; color: rgba(var(--w-ink-rgb),.75); font-size: 13px; } .watch-footer__copy{ line-height: 1.2; } .watch-footer__social{ margin-top: 10px; display: flex; justify-content: center; gap: 12px; } .watch-footer__sociallink{ width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-ink-rgb),.03); color: rgba(var(--w-ink-rgb),.78); transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .watch-footer__sociallink:hover{ transform: translateY(-1px) scale(1.02); background: rgba(var(--w-ink-rgb),.06); border-color: rgba(var(--w-ink-rgb),.18); color: rgba(var(--w-ink-rgb),.95); } .watch-footer__sociallink:focus-visible{ outline: 2px solid var(--w-accent); outline-offset: 3px; } .watch-footer__icon{ width: 18px !important; height: 18px !important; display: block; fill: currentColor; } .watch-footer__sociallink svg{ width: 18px !important; height: 18px !important; } /* ========================================================= MOVIE PAGE ========================================================= */ .watch-movie{ background: rgba(var(--w-bg-rgb),.92); border: 1px solid rgba(var(--w-ink-rgb),.08); border-radius: var(--w-radius); box-shadow: var(--w-shadow); padding: 18px; } .watch-movie__top{ display:flex; flex-direction:column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(var(--w-ink-rgb),.08); } .watch-movie__actions{ display:flex; justify-content:flex-end; gap: 10px; } .watch-movie__actions span > span{ display:inline-flex; align-items:center; justify-content:center; width: 40px; height: 40px; border-radius: 14px; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); } .watch-movie__title{ margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--w-text); } .watch-movie__meta{ display:flex; align-items:center; justify-content:space-between; gap: 12px; color: rgba(var(--w-ink-rgb),.7); font-size: 13px; } .watch-movie__cats a{ color: rgba(var(--w-ink-rgb),.85); text-decoration:none; } .watch-movie__cats a:hover{ text-decoration:underline; } .watch-movie__stats{ display:flex; gap: 12px; } .watch-movie__grid{ display:grid; grid-template-columns: 200px 1fr; gap: 18px; padding-top: 18px; } .watch-movie__side{ max-width: 200px; } .watch-movie__poster{ width: 100%; max-width: 200px; aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden; background: rgba(var(--w-ink-rgb),.05); border: 1px solid rgba(var(--w-ink-rgb),.10); } .watch-movie__poster img{ display:block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 980px){ /* Keep poster + info side-by-side on portrait mobile */ .watch-movie__grid{ grid-template-columns: 140px 1fr; } .watch-movie__side{ max-width: 140px; } .watch-movie__poster{ max-width: 140px; border-radius: 16px; } } @media (max-width: 520px){ /* If it's too tight, stack and keep poster compact */ .watch-movie__grid{ grid-template-columns: 1fr; } .watch-movie__side{ max-width: 100%; } .watch-movie__poster{ max-width: 200px; margin: 0 auto; } } /* Movie details (right of poster) */ .watch-movie__details{ margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 14px; color: rgba(var(--w-ink-rgb),.78); } .watch-movie__details strong{ color: rgba(var(--w-ink-rgb),.92); font-weight: 600; } /* Comments: force dark + remove subscribe checkbox */ .watch-comments, .watch-comments .addcomment, .watch-comments form, #dle-comments-form, #dle-comments-form .box_in, #dle-comments-form .box, #dle-comments-form .addcomment{ background: var(--w-bg) !important; } #subscribe, label[for="subscribe"], .comments_subscribe{ display: none !important; } @media (max-width: 520px){ .watch-movie__grid{ grid-template-columns: 1fr; } .watch-movie__poster{ max-width: 220px; margin: 0 auto; } } .watch-movie__poster{ width: 100%; max-width: 200px; } .watch-movie__poster img{ display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; } .watch-movie__meta{ margin-top: 10px; display: grid; gap: 6px; } .watch-movie__meta-row{ display: grid; grid-template-columns: 80px 1fr; gap: 10px; font-size: 13px; opacity: .92; } .watch-movie__meta-label{ opacity: .65; } .watch-movie__poster{ border-radius: 16px; overflow:hidden; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); } .watch-movie__poster img{ width:100%; display:block; aspect-ratio: 2 / 3; object-fit: cover; } .watch-movie__sidebox{ margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); } .watch-movie__sidehead{ font-weight: 800; color: var(--w-text); margin-bottom: 10px; } .watch-movie__sideactions{ display:flex; flex-direction:column; gap: 10px; } .watch-movie__desc{ color: rgba(var(--w-ink-rgb),.9); line-height: 1.7; font-size: 15px; } .watch-movie__desc a{ color: var(--w-text); } .watch-movie__below{ margin-top: 16px; } /* ========================================================= PLAYER (provided xfield iframe_url) ========================================================= */ .player-wrap{ position: relative; z-index: 9000; width: 100%; margin: 0 0 16px 0; } .player-frame{ z-index: 9000; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .player-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ensure icons/links in topbar are white (no blue links) */ .watch-topbar a, .watch-topbar button{ color: rgba(var(--w-ink-rgb),.92); } .watch-topbar .watch-mi{ color: currentColor; } /* comments editor dark */ .addcomment iframe, .addcomment textarea, .bb-editor textarea, .wysibb, .wysibb-textarea, .wysibb-body{ background: var(--w-bg) !important; color: var(--w-text) !important; border-color: rgba(var(--w-ink-rgb),.14) !important; } .wysibb .wysibb-toolbar, .wysibb .wysibb-toolbar-container{ background: rgba(var(--w-ink-rgb),.04) !important; border-color: rgba(var(--w-ink-rgb),.10) !important; } /* comments list dark */ .comment{ background: rgba(var(--w-ink-rgb),.04); border: 1px solid rgba(var(--w-ink-rgb),.08); border-radius: 18px; padding: 12px 12px; } .comment .com_info{ border-bottom: 1px solid rgba(var(--w-ink-rgb),.08); padding-bottom: 10px; margin-bottom: 10px; } .comment .text{ color: rgba(var(--w-ink-rgb),.90); } .comment .grey{ color: rgba(var(--w-ink-rgb),.60) !important; } /* hide any legacy search panels (we use modal search only) */ .watch-topbar .search, .watch-topbar .search-box, .watch-topbar .search_panel, .watch-topbar .head_search, .watch-topbar form[id*="search"], .watch-topbar form[class*="search"]{ display:none !important; } .watch-topbar a:visited{ color: rgba(var(--w-ink-rgb),.92); } /* Smooth hover scale for top buttons */ .watch-searchbtn, .watch-iconbtn, .watch-topnav__item{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .watch-searchbtn:hover, .watch-iconbtn:hover, .watch-topnav__item:hover{ transform: scale(1.06); } /* Remove any underline / bottom line on hover */ .watch-topbar a, .watch-topbar a:hover, .watch-topbar a:focus{ text-decoration: none !important; box-shadow: none !important; } /* Rail arrows */ .rail-wrap{ position: relative; } .rail{ scroll-behavior: smooth; } .rail-arrow{ position:absolute; top:50%; transform: translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(var(--w-ink-rgb),.22); background: rgba(var(--w-bg-rgb),.35); color: rgba(var(--w-ink-rgb),.9); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:30px; line-height:1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; } .rail-arrow:hover{ transform: translateY(-50%) scale(1.08); background: rgba(var(--w-bg-rgb),.55); border-color: rgba(var(--w-ink-rgb),.35); } .rail-arrow--prev{ left: 10px; } .rail-arrow--next{ right: 10px; } .rail-arrow.is-hidden{ opacity:0; pointer-events:none; } /* Fullstory title + original title */ .watch-movie__title{ text-align:center; font-family: "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: .2px; } .watch-movie__subtitle, .watch-movie__orig{ text-align:center; color: rgba(var(--w-ink-rgb),.72); font-family: "Segoe UI", Tahoma, Arial, sans-serif; } /* Modern dark comments */ .box .box_in, .addcomment .box_in{ background: rgba(var(--w-ink-rgb),.04); border: 1px solid rgba(var(--w-ink-rgb),.10); border-radius: 18px; } .addcomment h3{ color: rgba(var(--w-ink-rgb),.92) !important; } .addcomment .ui-form input, .addcomment .ui-form textarea, .addcomment .ui-form select, .addcomment #comment-editor{ color: rgba(var(--w-ink-rgb),.92); } .addcomment .ui-form input.wide, .addcomment .ui-form textarea, .addcomment .ui-form input, .addcomment .ui-form textarea{ background: rgba(var(--w-bg-rgb),.35) !important; border: 1px solid rgba(var(--w-ink-rgb),.16) !important; border-radius: 14px !important; } .addcomment .form_submit .btn{ background: rgba(var(--w-bg-rgb),.92); border:1px solid rgba(var(--w-ink-rgb),.22); border-radius: 999px; color: rgba(var(--w-ink-rgb),.92); } .addcomment .form_submit .btn:hover{ transform: scale(1.03); } .comment{ background: rgba(var(--w-ink-rgb),.03); border: 1px solid rgba(var(--w-ink-rgb),.08); border-radius: 18px; padding: 14px 16px; } .comment .name{ color: rgba(var(--w-ink-rgb),.92); } .comment .grey{ color: rgba(var(--w-ink-rgb),.55) !important; } .comment .com_content .text{ color: rgba(var(--w-ink-rgb),.86); } .comment .meta a, .comment .meta a:hover{ text-decoration:none !important; } /* hover scale */ .watch-searchbtn,.watch-iconbtn,.watch-topnav__item{transition:transform .18s ease, background .18s ease, border-color .18s ease;} .watch-searchbtn:hover,.watch-iconbtn:hover,.watch-topnav__item:hover{transform:scale(1.06);} .watch-topnav__item:hover,.watch-topnav__item:focus,.watch-iconbtn:hover,.watch-iconbtn:focus{ text-decoration:none !important; box-shadow:none !important; } /* comments dark */ #dle-comments, .comments, .comments-area{color:rgba(var(--w-ink-rgb),.9);} #dle-comments a{color:rgba(var(--w-ink-rgb),.9);} .addcomment, .addcomment form, .addcomment .box, .addcomment .box_in{background:#000 !important;} .addcomment textarea, .addcomment input[type="text"], .addcomment input[type="email"], .addcomment input[type="password"]{background:rgba(var(--w-ink-rgb),.06) !important;border:1px solid rgba(var(--w-ink-rgb),.14) !important;color: var(--w-text) !important;border-radius:14px !important;} .addcomment textarea:focus, .addcomment input:focus{outline:none !important;border-color:rgba(var(--w-ink-rgb),.28) !important;} .addcomment button, .addcomment input[type="submit"]{background:rgba(var(--w-ink-rgb),.08) !important;border:1px solid rgba(var(--w-ink-rgb),.16) !important;color: var(--w-text) !important;border-radius:999px !important;padding:10px 14px !important;} .addcomment button:hover, .addcomment input[type="submit"]:hover{background:rgba(var(--w-ink-rgb),.12) !important;} .comments-item, .comment{background:rgba(var(--w-ink-rgb),.04) !important;border:1px solid rgba(var(--w-ink-rgb),.08) !important;border-radius:18px !important;padding:14px 14px !important;margin:12px 0 !important;} .comments-item .info, .comment .info{color:rgba(var(--w-ink-rgb),.7) !important;} /* search modal open animation */ .watch-searchmodal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease;} .watch-searchmodal.is-open .watch-searchmodal__overlay{opacity:1;} .watch-searchmodal.is-open .watch-searchmodal__panel{transform:translateY(0) scale(1);opacity:1;} /* hover micro-interactions (no scale on logo to avoid blur) */ .watch-searchbtn, .watch-iconbtn, .watch-topnav__item{transition:transform .18s ease,background .18s ease,border-color .18s ease;} .watch-searchbtn:hover, .watch-iconbtn:hover, .watch-topnav__item:hover{transform:scale(1.06);text-decoration:none;box-shadow:none;} .watch-searchbtn:focus, .watch-iconbtn:focus, .watch-topnav__item:focus{outline:none;box-shadow:none;text-decoration:none;} .watch-topnav__item:hover .watch-topnav__text{ text-decoration:none; } .watch-topbar a:hover{ text-decoration:none; } /* rail arrows */ .rail-wrap{position:relative;} .rail-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(var(--w-ink-rgb),.35);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .rail-arrow .watch-mi{font-size:22px;} .rail-arrow--prev{left:-14px;} .rail-arrow--next{right:-14px;} .rail-arrow:hover{background:rgba(0,0,0,.55);transform:translateY(-50%) scale(1.06);} .rail-arrow.is-hidden{opacity:0;pointer-events:none;} @media (max-width: 700px){ .rail-arrow--prev{left:6px;} .rail-arrow--next{right:6px;} } /* comments modern dark */ #dle-comments, .comments, .comment, .comments-tree{color:rgba(var(--w-ink-rgb),.92);} #dle-comments .comment, .comment-item{background:rgba(var(--w-ink-rgb),.04);border:1px solid rgba(var(--w-ink-rgb),.08);border-radius:16px;padding:14px 16px;margin:12px 0;} #dle-comments .comment .title, #dle-comments .comment .meta{color:rgba(var(--w-ink-rgb),.75);} #dle-comments a{color:rgba(var(--w-ink-rgb),.9);} #dle-comments a:hover{text-decoration:none;} /* add comment form */ .addcomment, #addcomment, .comments_form{background:rgba(var(--w-ink-rgb),.04);border:1px solid rgba(var(--w-ink-rgb),.08);border-radius:18px;padding:16px;margin:16px 0;} .addcomment textarea, #addcomment textarea, .comments_form textarea, .addcomment input[type="text"], #addcomment input[type="text"], .comments_form input[type="text"]{width:100%;background:rgba(0,0,0,.55);color:rgba(var(--w-ink-rgb),.92);border:1px solid rgba(var(--w-ink-rgb),.18);border-radius:14px;padding:12px 14px;} .addcomment textarea:focus, #addcomment textarea:focus{outline:none;border-color:rgba(var(--w-ink-rgb),.38);} .addcomment button, .comments_form button, #addcomment button, .addcomment input[type="submit"], #addcomment input[type="submit"]{background: rgba(var(--w-bg-rgb),.92);border:1px solid rgba(var(--w-ink-rgb),.28);color:rgba(var(--w-ink-rgb),.92);border-radius:999px;padding:10px 14px;cursor:pointer;} .addcomment button:hover, #addcomment input[type="submit"]:hover{transform:scale(1.03);} /* movie title + original title */ .watch-movie__title{font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:.2px;} .watch-movie__title, .watch-movie__meta{ text-align:center; } .watch-movie__orig{margin-top:6px;text-align:center;color:rgba(var(--w-ink-rgb),.68);font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:14px;} /* --- UI hover animations --- */ .watch-searchbtn,.watch-iconbtn,.watch-topnav__item{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease;transform-origin:center;} .watch-searchbtn:hover,.watch-iconbtn:hover,.watch-topnav__item:hover{transform:scale(1.06);} /* remove underline/подводку on hover */ .watch-topnav__item,.watch-topnav__item:hover,.watch-topnav__item:focus,.watch-iconbtn,.watch-iconbtn:hover,.watch-iconbtn:focus{outline:none;text-decoration:none !important;box-shadow:none !important;} /* --- Search modal open animation (JS toggles .is-open) --- */ .watch-searchmodal{display:block !important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s;} .watch-searchmodal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease;} .watch-searchmodal__overlay{opacity:0;transition:opacity .22s ease;} .watch-searchmodal.is-open .watch-searchmodal__overlay{opacity:1;} .watch-searchmodal__panel{transform:translateY(10px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease;} .watch-searchmodal.is-open .watch-searchmodal__panel{transform:translateY(0) scale(1);opacity:1;} /* --- Rail arrows --- */ .rail-wrap{position:relative;} .rail-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:1px solid rgba(var(--w-ink-rgb),.25);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;} .rail-arrow--prev{left:6px;} .rail-arrow--next{right:6px;} .rail-arrow:hover{transform:translateY(-50%) scale(1.08);border-color:rgba(var(--w-ink-rgb),.5);} .rail-arrow:active{transform:translateY(-50%) scale(1.02);} .rail-arrow .watch-mi{font-size:22px;} /* --- Fullstory title + original title styling --- */ .watch-movie__title{color: var(--w-text);text-align:center;font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:.2px;} .watch-movie__orig{margin-top:6px;color:rgba(var(--w-ink-rgb),.75);text-align:center;font-size:14px;font-family:"Segoe UI",Tahoma,Arial,sans-serif;} /* --- Comments modern dark (overrides default DLE templates) --- */ #dle-comments,.comments,.comments_list{background:transparent;color:rgba(var(--w-ink-rgb),.9);} .addcomment,.addcomment form,.addcomment .editor,.addcomment .bb-editor,.addcomment textarea,.addcomment input[type="text"]{background:rgba(var(--w-ink-rgb),.06) !important;color:rgba(var(--w-ink-rgb),.92) !important;border:1px solid rgba(var(--w-ink-rgb),.14) !important;border-radius:14px !important;} .addcomment textarea{min-height:140px;} .addcomment button,.addcomment input[type="submit"],.comments button{background:rgba(var(--w-ink-rgb),.12) !important;border:1px solid rgba(var(--w-ink-rgb),.18) !important;color:rgba(var(--w-ink-rgb),.9) !important;border-radius:999px !important;padding:10px 14px !important;} .addcomment button:hover,.addcomment input[type="submit"]:hover{transform:scale(1.03);} .com_item,.comment,.comment-item{background:rgba(var(--w-ink-rgb),.04);border:1px solid rgba(var(--w-ink-rgb),.08);border-radius:18px;padding:14px 16px;margin:10px 0;} .com_text,.comment-text{color:rgba(var(--w-ink-rgb),.88);} .com_info,.comment-meta{color:rgba(var(--w-ink-rgb),.65);} /* player below description spacing */ .watch-movie__desc{ margin-bottom: 14px; } .player-wrap{ position: relative; z-index: 9000; margin-top: 12px; } /* ----------------------------- HOTFIX: comments stay dark + hide subscribe checkbox ----------------------------- */ .watch-comments, .watch-comments .addcomment, .watch-comments #dle-comments-form, .watch-comments .comments, .watch-comments .comment-item, .watch-comments .comment-item__body, .watch-comments .comment-item__text, .watch-comments textarea, .watch-comments input, .watch-comments select{ background: var(--w-bg) !important; color: var(--w-text) !important; } .watch-comments textarea{ border-color: rgba(var(--w-ink-rgb),.12) !important; } /* Hide subscribe to comments */ #subscribe, label[for="subscribe"], input[name="subscribe"], .watch-comments .comments_subscribe, .watch-comments .subscribe, .watch-comments .subscribe-box{ display: none !important; } /* If some templates still wrap comments in .box, neutralize it */ .watch-comments .box, .watch-movie__comments .box{ background: transparent !important; border: none !important; box-shadow: none !important; } /* === v4 tweaks: hide rail scrollbar + show arrows on hover === */ .rail::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important;} .rail{-ms-overflow-style:none !important;scrollbar-width:none !important;} .rail{ scrollbar-width: none; -ms-overflow-style: none; } .rail::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; } .rail-wrap .rail-arrow{ opacity:0; pointer-events:none; transform: translateY(-50%) scale(.92); transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease; } .rail-wrap.has-overflow[data-edge-hover="left"] .rail-arrow--prev, .rail-wrap.has-overflow[data-edge-hover="right"] .rail-arrow--next, .rail-wrap:focus-within .rail-arrow{ opacity:1; pointer-events:auto; transform: translateY(-50%) scale(1); } .rail-wrap .rail-arrow.is-hidden{ opacity:0 !important; pointer-events:none !important; } /* search modal open animation */ .watch-searchmodal{ opacity:0; transform: translateY(-10px) scale(.98); pointer-events:none; transition: opacity .22s ease, transform .22s ease; } .watch-searchmodal.is-open{ opacity:1; transform: none; pointer-events:auto; } /* nicer checkboxes (search + other places) */ .watch-check{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .watch-check input{ position:absolute; opacity:0; pointer-events:none; } .watch-check span{ position:relative; padding-left:28px; } .watch-check span:before{ content:""; position:absolute; left:0; top:50%; transform: translateY(-50%); width:18px; height:18px; border-radius:6px; border:1px solid rgba(var(--w-ink-rgb),.25); background: rgba(var(--w-ink-rgb),.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); transition: transform .18s ease, background .18s ease, border-color .18s ease; } .watch-check input:checked + span:before{ background: rgba(80,170,255,.32); border-color: rgba(120,200,255,.55); } .watch-check span:after{ content:""; position:absolute; left:6px; top:50%; transform: translateY(-55%) rotate(45deg); width:6px; height:10px; border-right:2px solid rgba(var(--w-ink-rgb),.92); border-bottom:2px solid rgba(var(--w-ink-rgb),.92); opacity:0; transition: opacity .18s ease; } .watch-check input:checked + span:after{ opacity:1; } /* account dropdown */ .watch-account{ position:relative; display:inline-flex; } .watch-account__menu{ position:absolute; right:0; top: calc(100% + 10px); min-width: 250px; padding:10px; border-radius:16px; border:1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); background-color: rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--w-menu-shadow); opacity:0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events:none; transition: opacity .20s ease, transform .20s ease; z-index: 40; } .watch-account.is-open .watch-account__menu{ opacity:1; transform: none; pointer-events:auto; } .watch-account__item{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; width: 100%; color: rgba(var(--w-ink-rgb),.94); font-weight: 600; letter-spacing: .2px; text-decoration: none; } .watch-account__item .material-icons-outlined{ font-size:20px; opacity:.95; } .watch-account__item:hover{ background: rgba(var(--w-ink-rgb),.07); } .watch-account__sep{ height:1px; margin:8px 10px; background: rgba(var(--w-ink-rgb),.10); } .watch-account__item--danger{ color: #ff6b6b; } .watch-account__item--danger:hover{ background: rgba(255,107,107,.12); } /* comments auth notice */ .watch-comments__auth{ padding:14px 16px; border-radius:16px; border:1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.04); color: rgba(var(--w-ink-rgb),.75); } .watch-comments__authText{ text-align: center; margin-bottom: 10px; font-weight: 600; color: rgba(var(--w-ink-rgb),.78); } .watch-comments--guest .watch-comments__auth{ text-align: center; } /* Guest comments prompt: keep it minimal and centered */ .watch-comments--guest .watch-btn{ display:block; margin: 14px auto 0; } /* Force poster images to fill their blocks (no empty bottom area) */ .watch-movie__poster{ aspect-ratio: 2 / 3; } .watch-movie__poster img{ display:block; width:100% !important; height:100% !important; object-fit: cover !important; } /* ========================================================= v10 tweaks - Sticky headbar - Neutral (no accent colors) in the "Действия" status panel ========================================================= */ /* Headbar always pinned */ .watch-topbar{ position: sticky; top: 0; z-index: 11000; /* above player (9000) and snow (8000) */ background: rgba(var(--w-bg-rgb),.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--w-ink-rgb),.06); } /* Remove status accent colors (panel + button label) */ .watch-mark[data-watch-status] .watch-mark__text{ color: rgba(var(--w-ink-rgb),.92) !important; } .watch-mark[data-watch-status="none"] .watch-mark__text{ color: rgba(var(--w-ink-rgb),.60) !important; } /* Keep the button style neutral even when status is selected */ .watch-mark[data-watch-status] .watch-mark__btn{ border-color: rgba(var(--w-ink-rgb),.12) !important; background: rgba(var(--w-ink-rgb),.04) !important; } /* Make all menu items monochrome */ .watch-mark__item[data-status="watching"], .watch-mark__item[data-status="planned"], .watch-mark__item[data-status="postponed"], .watch-mark__item[data-status="watched"], .watch-mark__item[data-status="dropped"]{ color: rgba(var(--w-ink-rgb),.94) !important; } /* ========================================================= v13 tweaks - "Действия" typography like the account dropdown - Rail arrows always clickable above hover-scaled posters - Drag-to-scroll cursor feedback ========================================================= */ /* Make the actions block feel like the account menu */ .watch-movie__sidehead{ font-weight: 700; letter-spacing: .2px; } .watch-mark__btn{ font-weight: 500 !important; letter-spacing: .2px; } .watch-mark__btn .watch-mark__text{ font-weight: 500; letter-spacing: .2px; } .watch-mark__item{ font-weight: 500 !important; letter-spacing: .2px; } /* Drag scroll */ .rail{ cursor: grab; user-select: none; -webkit-user-select: none; /* Allow native horizontal swipe on mobile rails (and keep vertical page scroll). */ touch-action: pan-x pan-y; } .rail a, .rail img{ -webkit-user-drag: none; user-drag: none; } .rail.is-dragging, .rail.is-dragging *{ cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; } .rail.is-dragging{ scroll-snap-type:none !important; } .rail.is-dragging a{ pointer-events: none !important; } /* Arrow must stay above posters (posters scale on hover and can overlap) */ .rail-arrow{ z-index: 80 !important; } /* Keep horizontal clipping on home rails (prevents right-edge poster tails). */ .watch-home .rail-wrap{ overflow-x: hidden !important; overflow-y: visible !important; } /* ========================================================= Settings page safety net Hide DLE post feed blocks that can appear under /settings ========================================================= */ html.watch-settings-page .watch-header, html.watch-settings-page .watch-footer, html.watch-settings-mode .watch-header, html.watch-settings-mode .watch-footer{ display: none !important; } html.watch-settings-page .watch-page > :not(.watch-settings-root), html.watch-settings-mode .watch-page > :not(.watch-settings-root){ display: none !important; } html.watch-settings-page .watch-settings-root, html.watch-settings-mode .watch-settings-root{ display: block !important; } html.watch-settings-page .shortstory, html.watch-settings-page .story, html.watch-settings-page .box.story, html.watch-settings-page .splitnewsnavigation, html.watch-settings-page .navigation, html.watch-settings-page .pagi-nav, html.watch-settings-page .pagination, html.watch-settings-page .page-nav, html.watch-settings-page .page_nav, html.watch-settings-page .pager{ display: none !important; } /* Hide default DLE news feed on the homepage */ html.watch-home .shortstory, html.watch-home .story, html.watch-home .box.story, html.watch-home .splitnewsnavigation, html.watch-home .navigation, html.watch-home .pagi-nav, html.watch-home .pagination, html.watch-home .page-nav, html.watch-home .page_nav, html.watch-home .pager{ display: none !important; } /* --- Watch UI: buttons & settings polish (v33) --- */ .watch-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(25,25,25,.55); color:#fff; font-weight:600; cursor:pointer; user-select:none; text-decoration:none; } .watch-btn:hover{ background:rgba(40,40,40,.65); border-color:rgba(255,255,255,.22); } .watch-btn:active{ transform:translateY(1px); } .watch-settings__file{ width:100%; color:rgba(255,255,255,.85); font-size:13px; } .watch-settings__file::file-selector-button{ margin-right:10px; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(25,25,25,.55); color:#fff; font-weight:600; cursor:pointer; } .watch-settings__file::-webkit-file-upload-button{ margin-right:10px; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(25,25,25,.55); color:#fff; font-weight:600; cursor:pointer; } .watch-comment-auth__box{ margin-top:10px; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(20,20,20,.55); color:rgba(255,255,255,.88); } /* When /settings is opened, force-hide any leftover content blocks */ html.watch-settings-page #watchHomeBlocks, html.watch-settings-page .watch-home, html.watch-settings-page .watch-movie, html.watch-settings-page .shortstory, html.watch-settings-page .watch-movie-comment, html.watch-settings-page #dle-content{ display:none !important; } /* ========================================================= v34 – Comments + Settings style fixes ========================================================= */ /* Buttons: variants */ .watch-btn--primary{ background: rgba(91,108,255,.22); border-color: rgba(91,108,255,.46); } .watch-btn--primary:hover{ background: rgba(91,108,255,.30); border-color: rgba(91,108,255,.62); } .watch-btn--ghost{ background: transparent; border-color: rgba(var(--w-ink-rgb),.14); color: rgba(var(--w-ink-rgb),.88); } .watch-btn--ghost:hover{ background: rgba(var(--w-ink-rgb),.06); border-color: rgba(var(--w-ink-rgb),.22); } .watch-btn--danger{ background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.32); color: #ff9a9a; } .watch-btn--danger:hover{ background: rgba(255,107,107,.18); border-color: rgba(255,107,107,.44); } /* Settings: current login line + avatar icon */ .watch-settings__current{ color: rgba(var(--w-ink-rgb),.68); font-size: 12px; margin-top: -2px; } .watch-settings__currentLogin{ color: rgba(var(--w-ink-rgb),.92); font-weight: 900; } .watch-settings__avatar{ display: inline-flex; align-items: center; justify-content: center; } .watch-settings__avatar .watch-mi{ font-size: 24px; opacity: .72; color: rgba(var(--w-ink-rgb),.92); text-shadow: 0 10px 24px rgba(0,0,0,.35); } /* Comments wrapper: kill white DLE boxes inside comments */ .watch-comments .box, .watch-comments .box_in, .watch-comments .comments, .watch-comments .com_list{ background: transparent !important; box-shadow: none !important; } .watch-comments > .box, .watch-comments .box{ border-radius: 22px !important; border: 1px solid rgba(var(--w-ink-rgb),.12) !important; background: rgba(var(--w-ink-rgb),.03) !important; overflow: hidden; } .watch-comments .box > .heading{ padding: 18px 18px 10px !important; margin: 0 !important; color: rgba(var(--w-ink-rgb),.92) !important; text-transform: none !important; letter-spacing: .2px; } .watch-comments .com_list{ padding: 0 18px 14px !important; } /* Comment form (addcomment.tpl) */ .watch-addcomment{ margin-top: 16px; } .watch-addcomment__head{ margin: 0 0 10px; } .watch-addcomment__title{ margin: 0; font-size: 18px; font-weight: 900; color: rgba(var(--w-ink-rgb),.94); } .watch-addcomment__form{ border-radius: 22px; border: 1px solid rgba(var(--w-ink-rgb),.12); background: rgba(var(--w-ink-rgb),.03); box-shadow: 0 14px 40px rgba(0,0,0,.35); padding: 16px; } .watch-addcomment__actions{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .watch-addcomment__spoiler{ font-weight: 800; color: rgba(var(--w-ink-rgb),.80); } /* Ensure the editor itself is dark and fits the card */ .watch-addcomment #comment-editor, .watch-addcomment .bb-editor, .watch-addcomment .wysibb{ width: 100% !important; } .watch-addcomment .bb-editor, .watch-addcomment .wysibb, .watch-addcomment iframe, .watch-addcomment textarea{ background: rgba(var(--w-bg-rgb),.35) !important; color: rgba(var(--w-ink-rgb),.92) !important; border: 1px solid rgba(var(--w-ink-rgb),.16) !important; border-radius: 16px !important; } .watch-addcomment .bb-editor textarea, .watch-addcomment .wysibb-textarea, .watch-addcomment .wysibb-body, .watch-addcomment .wysibb-texarea{ background: transparent !important; color: rgba(var(--w-ink-rgb),.92) !important; } .watch-addcomment .bb-editor textarea{ min-height: 160px; } .watch-addcomment .wysibb .wysibb-toolbar, .watch-addcomment .wysibb .wysibb-toolbar-container{ background: rgba(var(--w-ink-rgb),.04) !important; border-bottom: 1px solid rgba(var(--w-ink-rgb),.10) !important; } /* Spoiler checkbox style (reuses .watch-check, but tighten spacing here) */ .watch-addcomment .watch-check span{ padding-left: 28px; } /* Make comment list items look like cards (override .com_list .comment defaults) */ .watch-comments .com_list .comment{ background: rgba(var(--w-ink-rgb),.04) !important; border: 1px solid rgba(var(--w-ink-rgb),.10) !important; border-radius: 18px !important; margin: 12px 0 !important; padding: 14px 16px !important; } /* Remove the default top borders between comments */ .watch-comments .com_list .comment{ border-top: none !important; } /* Keep the old hover shadow subtle in dark mode */ .watch-comments .com_list .comment:hover{ box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; } /* ========================= v35 fixes: topbar, posters, categories ========================= */ :root{ --w-poster-shadow: 0 18px 52px rgba(0,0,0,.32); --w-poster-hover-scale: 1; --w-poster-wrap-hover-scale: 1.024; --w-poster-wrap-text-scale: 1; --w-poster-hover-text-scale: 0.96154; } [data-watch-theme="light"]{ --w-poster-shadow: 0 16px 46px rgba(0,0,0,.14); } /* Poster shadows should look clean in both themes */ .mcard__img{ box-shadow: var(--w-poster-shadow) !important; } .mcard:hover .mcard__img{ box-shadow: 0 30px 84px rgba(0,0,0,.48) !important; } [data-watch-theme="light"] .mcard:hover .mcard__img{ box-shadow: 0 26px 70px rgba(0,0,0,.22) !important; } .watch-home .mcard:hover, .watch-home .mcard:focus-within, .watch-libv2 .mcard:hover, .watch-libv2 .mcard:focus-within, .watch-catpage .mcard:hover, .watch-catpage .mcard:focus-within{ transform: translateY(-2px) !important; z-index: 24; } .watch-home .mcard:hover .mcard__img, .watch-home .mcard:focus-within .mcard__img, .watch-libv2 .mcard:hover .mcard__img, .watch-libv2 .mcard:focus-within .mcard__img, .watch-catpage .mcard:hover .mcard__img, .watch-catpage .mcard:focus-within .mcard__img{ transform: translateZ(0) scale(var(--w-poster-wrap-hover-scale)) !important; } .watch-home .mcard:hover .mcard__textLayer, .watch-home .mcard:focus-within .mcard__textLayer, .watch-libv2 .mcard:hover .mcard__textLayer, .watch-libv2 .mcard:focus-within .mcard__textLayer, .watch-catpage .mcard:hover .mcard__textLayer, .watch-catpage .mcard:focus-within .mcard__textLayer{ transform: translateZ(0) scale(var(--w-poster-wrap-hover-scale)) !important; } /* Prevent text blur: scale only poster bitmap, never text container */ .watch-home .mcard:hover .mcard__img img, .watch-home .mcard__img:hover img, .watch-home .mcard:focus-within .mcard__img img, .watch-libv2 .mcard:hover .mcard__img img, .watch-libv2 .mcard__img:hover img, .watch-libv2 .mcard:focus-within .mcard__img img, .watch-catpage .mcard:hover .mcard__img img, .watch-catpage .mcard__img:hover img, .watch-catpage .mcard:focus-within .mcard__img img{ transform: scale(var(--w-poster-hover-scale)) !important; transform-origin: center center; } /* Touch devices: no hover scale at all */ @media (hover: none), (pointer: coarse) { .watch-home .mcard:hover .mcard__img img, .watch-home .mcard__img:hover img, .watch-home .mcard:focus-within .mcard__img img, .watch-libv2 .mcard:hover .mcard__img img, .watch-libv2 .mcard__img:hover img, .watch-libv2 .mcard:focus-within .mcard__img img, .watch-catpage .mcard:hover .mcard__img img, .watch-catpage .mcard__img:hover img, .watch-catpage .mcard:focus-within .mcard__img img, .watch-home .mcard:hover .mcard__img, .watch-home .mcard:focus-within .mcard__img, .watch-libv2 .mcard:hover .mcard__img, .watch-libv2 .mcard:focus-within .mcard__img, .watch-catpage .mcard:hover .mcard__img, .watch-catpage .mcard:focus-within .mcard__img { transform: translateZ(0) scale(1) !important; } } .watch-home .mcard:hover .mcard__img img, .watch-home .mcard__img:hover img, .watch-home .mcard:focus-within .mcard__img img, .watch-libv2 .mcard:hover .mcard__img img, .watch-libv2 .mcard__img:hover img, .watch-libv2 .mcard:focus-within .mcard__img img, .watch-catpage .mcard:hover .mcard__img img, .watch-catpage .mcard__img:hover img, .watch-catpage .mcard:focus-within .mcard__img img{ transform: scale(var(--w-poster-hover-scale)) !important; } .watch-home .mcard__overlayTitle, .watch-home .mcard__overlayDesc{ font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } /* Home cards: title without shadow */ .watch-home .mcard__title, .watch-home .mcard__overlayTitle, .watch-home .mcard__overlayDesc{ text-shadow: none !important; } .watch-home .mcard:hover .mcard__overlayBody, .watch-home .mcard:focus-within .mcard__overlayBody, .watch-libv2 .mcard:hover .mcard__overlayBody, .watch-libv2 .mcard:focus-within .mcard__overlayBody, .watch-catpage .mcard:hover .mcard__overlayBody, .watch-catpage .mcard:focus-within .mcard__overlayBody{ opacity: 1 !important; transform: translate3d(0,0,0) !important; transform-origin: left bottom !important; } /* Category cards: remove text shadows (title + hover text) */ .watch-catpage .mcard__title, .watch-catpage .mcard__overlayTitle, .watch-catpage .mcard__overlayDesc{ text-shadow: none !important; } .rail.is-dragging .mcard, .rail.is-drag-release .mcard{ z-index: 1 !important; } .rail.is-dragging .mcard__img, .rail.is-drag-release .mcard__img{ transform: translateZ(0) scale(1) !important; } .rail.is-dragging .mcard__img img, .rail.is-drag-release .mcard__img img{ transform: none !important; } /* Topbar: make it compact + avoid double-spacing (sticky vs fixed) */ .watch-topbar{ position: fixed !important; top: 14px !important; left: 16px !important; right: 16px !important; width: auto !important; border-radius: 22px !important; border: 1px solid rgba(var(--w-border-rgb), .9) !important; border-bottom: 1px solid rgba(var(--w-border-rgb), .9) !important; background: rgba(var(--w-bg-rgb), .62) !important; backdrop-filter: blur(16px) !important; box-shadow: var(--w-shadow) !important; padding: 10px 14px !important; } .watch-content{ padding-top: calc(var(--watch-topbar-h, 72px) + 28px) !important; } .watch-searchbtn{ width: 40px !important; height: 40px !important; } .watch-topnav__item{ height: 40px !important; padding: 8px 12px !important; } @media (max-width: 640px){ .watch-topbar{ top: 10px !important; left: 10px !important; right: 10px !important; border-radius: 18px !important; padding: 10px 12px !important; } .watch-content{ padding-top: calc(var(--watch-topbar-h, 72px) + 20px) !important; } .watch-searchbtn{ width: 38px !important; height: 38px !important; } .watch-topnav__item{ height: 38px !important; padding: 8px 10px !important; } } /* "Смотреть всё" should look like a button and be clickable */ .watch-block__link{ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 14px !important; border-radius: 999px !important; border: 1px solid rgba(var(--w-ink-rgb), .18) !important; background: rgba(var(--w-bg-rgb), .22) !important; color: var(--w-ink) !important; text-decoration: none !important; line-height: 1 !important; } .watch-block__link:hover{ border-color: rgba(var(--w-ink-rgb), .32) !important; background: rgba(var(--w-bg-rgb), .32) !important; } /* Category page: show all items as a poster grid */ .watch-catpage{ padding: 8px 2px 10px; } .watch-catgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 10px 2px 2px; } .watch-catgrid .mcard{ width: 100% !important; } .watch-catgrid .mcard__img{ width: 100% !important; } .watch-catgrid .mcard__img img{ width: 100% !important; height: 100% !important; object-fit: cover; } .watch-nav{ margin-top: 18px; } /* Category pages: we use "Добавить ещё" instead of classic pagination */ .watch-catpage .watch-nav, .watch-catpage .navigation, .watch-catpage #dle-navi, .watch-catpage #dle-navigation, .watch-catpage #dle-navigation-pages, .watch-catpage .navigation-pages, .watch-catpage .pages, .watch-catpage .dle-pages, .watch-catpage .dle_page, .watch-catpage .dle-page, .watch-catpage .splitnewsnavigation, .watch-catpage .pagi-nav, .watch-catpage .pagination, .watch-catpage .page-nav, .watch-catpage .page_nav, .watch-catpage .pager{ display: none !important; } .watch-loadmore-wrap{ margin-top: 14px; display: flex; justify-content: center; width: 100%; padding: 8px 0 24px; } .watch-loadmore-btn{ /* Force Watch look even if browser cached old CSS: this button must NOT look like a system button */ -webkit-appearance: none; appearance: none; font: inherit; line-height: 1.1; min-width: 240px; padding: 12px 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(25,25,25,.55) !important; color: rgba(255,255,255,.92) !important; font-weight: 700; letter-spacing: .2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; user-select: none; text-decoration: none; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease; } .watch-loadmore-btn:hover{ background: rgba(40,40,40,0.65); transform: translateY(-1px); box-shadow: 0 18px 50px rgba(0,0,0,0.28); } .watch-loadmore-btn:active{ transform: translateY(0); box-shadow: none; } .watch-loadmore-btn.is-loading{ opacity: .75; } .watch-loadmore-btn.is-done{ opacity: .65; cursor: default; } /* ========================= v36 tweaks: header spacing, search overlay, search posters ========================= */ /* Header: remove extra gap, remove empty left spacer */ .watch-topbar__left{ display: none !important; } .watch-topbar{ top: 8px !important; padding: 10px 14px !important; } .watch-content{ padding-top: calc(var(--watch-topbar-h, 72px) + 14px) !important; } @media (max-width: 980px){ .watch-topbar{ top: 6px !important; padding: 10px 12px !important; } .watch-content{ padding-top: calc(var(--watch-topbar-h, 72px) + 12px) !important; } } /* Search modal must be above the header */ .watch-searchmodal{ z-index: 20000 !important; } /* Hide scrollbars inside search modal (results + filters) */ .watch-searchmodal__results, .watch-searchmodal__filters{ scrollbar-width: none !important; -ms-overflow-style: none !important; } .watch-searchmodal__results::-webkit-scrollbar, .watch-searchmodal__filters::-webkit-scrollbar{ width: 0 !important; height: 0 !important; display: none !important; } /* Search thumbs show poster images */ .watch-searchmodal__thumb{ overflow: hidden; border: 1px solid rgba(var(--w-ink-rgb),.12); } .watch-searchmodal__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================= v37 – Header full width + search layering + bigger logo + search posters ========================= */ /* Full-width headbar that touches the top edge */ .watch-topbar{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; padding: 10px 18px !important; background: rgba(var(--w-menu-bg-rgb), .72) !important; border: 0 !important; border-bottom: 1px solid rgba(var(--w-ink-rgb), .10) !important; box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* Keep the left spacer to center the logo */ .watch-topbar__left{ display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; } .watch-topbar__right{ flex: 1 1 0 !important; } /* Content starts right after the bar (no extra gap) */ .watch-content{ padding-top: var(--watch-topbar-h, 72px) !important; } /* Logo: consolidated single size definition per breakpoint */ .watch-brand__img{ width: 220px !important; height: 60px !important; } @media (max-width: 980px){ .watch-topbar{ padding: 10px 14px !important; } .watch-brand__img{ width: 190px !important; height: 52px !important; } } @media (max-width: 640px){ .watch-topbar{ padding: 8px 12px !important; } .watch-brand__img{ width: 160px !important; height: 46px !important; } .watch-searchbtn{ width: 40px !important; height: 40px !important; } .watch-topnav__item{ padding: 8px 10px !important; } } /* Search modal must always be above the header */ .watch-searchmodal{ z-index: 30000 !important; } /* Make overlay dark in both themes */ .watch-searchmodal__overlay{ background: rgba(0,0,0,.66) !important; } /* Thumbs: ensure image is visible */ .watch-searchmodal__thumb{ overflow: hidden !important; border-radius: 12px !important; background: rgba(var(--w-ink-rgb),.08) !important; } .watch-searchmodal__thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Auth modal (guests) */ .watch-authmodal .watch-searchmodal__body{ grid-template-columns: 1fr !important; } .watch-authmodal__head{ flex: 1; min-width: 0; } .watch-authmodal__title{ font-weight: 900; font-size: 18px; line-height: 1.1; } .watch-authmodal__subtitle{ margin-top: 2px; font-size: 13px; color: rgba(var(--w-ink-rgb),.72); } .watch-authmodal__box{ width: 100%; max-width: 520px; margin: 0 auto; } .watch-authmodal__form{ display:flex; flex-direction:column; gap: 14px; } .watch-authmodal .watch-field{ display:flex; flex-direction:column; gap: 8px; } .watch-authmodal .watch-field__label{ font-weight: 800; font-size: 13px; color: rgba(var(--w-ink-rgb),.78); } .watch-authmodal .watch-field__input{ height: 44px; border-radius: 14px; padding: 0 14px; color: var(--w-text); background: rgba(var(--w-ink-rgb),.04); border: 1px solid rgba(var(--w-ink-rgb),.12); outline: none; } .watch-authmodal .watch-field__input:focus{ background: rgba(var(--w-ink-rgb),.06); border-color: rgba(var(--w-ink-rgb),.22); } .watch-authmodal__remember{ margin-top: 2px; } /* Registration captcha / recaptcha */ .watch-authmodal__captchaRow{ display:flex; align-items:center; gap: 12px; } .watch-authmodal__captchaImg{ flex: 0 0 auto; line-height: 0; } .watch-authmodal__captchaImg img{ display:block; max-width: 160px; height: auto; border-radius: 14px; } .watch-authmodal__captchaRow .watch-field__input{ flex: 1 1 auto; min-width: 0; } .watch-field--recaptcha{ align-items: center; } .watch-field--recaptcha > *{ margin: 0 auto; } @media (max-width: 480px){ .watch-authmodal__captchaRow{ flex-direction: column; align-items: stretch; } .watch-authmodal__captchaImg img{ max-width: 100%; } } .watch-authmodal__actions{ width:100%; display:flex; gap: 10px; align-items:center; flex-wrap: wrap; justify-content:center; text-align:center; } .watch-authmodal__actions .watch-btn{ margin: 0 auto; } .watch-authmodal__links{ margin-top: 2px; } .watch-authmodal__links a{ color: rgba(var(--w-ink-rgb),.85); text-decoration: none; } .watch-authmodal__links a:hover{ text-decoration: underline; } /* Login bottom row: centered button + forgot link on the same line */ .watch-authmodal__bottomrow{ width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 12px; } .watch-authmodal__bottomrow .watch-btn{ justify-self: center; margin: 0; } .watch-authmodal__forgot{ justify-self: end; font-size: 13px; color: rgba(var(--w-ink-rgb),.85); text-decoration: none; padding: 8px 10px; border-radius: 12px; transition: background .18s ease, color .18s ease; } .watch-authmodal__forgot:hover{ text-decoration: none; background: rgba(var(--w-ink-rgb),.08); color: rgba(var(--w-ink-rgb),.95); } .watch-recaptcha__error{ margin-top: 6px; text-align: center; font-size: 12px; color: rgba(255, 90, 90, .95); } /* Utility */ .watch-visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* Auth modal (guests) — centered card + blur background */ .watch-authmodal{ position: fixed !important; inset: 0 !important; z-index: 32000 !important; display: none !important; } .watch-authmodal.is-open{ /* base .watch-searchmodal has display:block !important, so override */ display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .watch-authmodal .watch-searchmodal__overlay{ background: rgba(0,0,0,.55); backdrop-filter: blur(14px) saturate(130%); position: absolute !important; inset: 0 !important; } .watch-authmodal__panel{ position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: min(520px, calc(100vw - 28px)) !important; height: auto !important; max-height: calc(100vh - 28px) !important; margin: 0 !important; overflow: auto !important; } .watch-authmodal .watch-searchmodal__top{ padding: 18px; display: flex; justify-content: center !important; text-align: center; } .watch-authmodal__head{ text-align: center !important; display: flex; flex-direction: column; align-items: center !important; width: 100% !important; } .watch-authmodal .watch-searchmodal__body{ display: block; padding: 18px; } .watch-authmodal__box{ max-width: 100%; } .watch-authmodal__tabs{ display:flex; gap: 10px; margin-bottom: 14px; } .watch-authmodal__tab{ flex:1; height: 36px; border-radius: 999px; border: 1px solid rgba(var(--w-ink-rgb),.18); background: rgba(var(--w-ink-rgb),.06); color: rgba(var(--w-ink-rgb),.88); font-weight: 900; letter-spacing: .2px; cursor: pointer; appearance: none; -webkit-appearance: none; outline: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .watch-authmodal__tab:hover{ transform: scale(1.02); } .watch-authmodal__tab.is-active{ background: rgba(80,170,255,.22); border-color: rgba(120,200,255,.42); color: rgba(var(--w-ink-rgb),.96); } .watch-authmodal .watch-authmodal__pane{ display:none !important; } .watch-authmodal .watch-authmodal__pane.is-active{ display:block !important; } .watch-authmodal .watch-field__hint{ font-size: 12px; color: rgba(var(--w-ink-rgb),.62); margin-top: -2px; } .watch-authmodal__caps{ margin-top: 6px; font-size: 12px; font-weight: 800; color: rgba(255, 170, 70, .95); } .watch-authmodal__remember{ margin-top: 8px; margin-bottom: 12px; } /* Auth captcha / question */ .watch-authmodal__question{ margin-top: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--w-ink-rgb),.14); background: rgba(var(--w-ink-rgb),.04); color: rgba(var(--w-ink-rgb),.86); font-size: 13px; line-height: 1.35; } .watch-captcha{ display:flex; gap: 12px; align-items: center; margin-top: 6px; } .watch-captcha__img{ flex: 0 0 auto; } .watch-captcha__img img{ display:block; max-height: 44px; border-radius: 12px; } .watch-captcha__input{ flex: 1 1 auto; } .watch-recaptcha{ margin-top: 6px; margin-bottom: 2px; display:flex; justify-content: center; } .watch-recaptcha.is-invalid{ outline: 2px solid rgba(255, 90, 90, .65); outline-offset: 10px; border-radius: 14px; } @media (max-width: 520px){ .watch-captcha{ flex-wrap: wrap; } .watch-captcha__img img{ width: 128px; } .watch-captcha__input{ min-width: 160px; } } /* Fix browser autofill color */ .watch-authmodal input:-webkit-autofill, .watch-authmodal input:-webkit-autofill:hover, .watch-authmodal input:-webkit-autofill:focus{ -webkit-text-fill-color: var(--w-text) !important; -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.65) inset !important; box-shadow: 0 0 0 1000px rgba(0,0,0,.65) inset !important; caret-color: var(--w-text) !important; } /* Password helper (collapsed by default) */ .watch-passhelper{ margin-top: 0; padding: 0 12px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); border-radius: 14px; border: 1px solid transparent; background: rgba(var(--w-ink-rgb),.04); transition: max-height .25s ease, opacity .25s ease, transform .25s ease, margin-top .25s ease, padding .25s ease, border-color .25s ease; } .watch-passhelper.is-open{ margin-top: 8px; padding: 10px 12px; max-height: 260px; opacity: 1; transform: translateY(0); border-color: rgba(var(--w-ink-rgb),.14); } .watch-passhelper__title{ font-weight: 900; font-size: 12px; color: rgba(var(--w-ink-rgb),.72); margin-bottom: 6px; } .watch-passhelper__list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .watch-passhelper__list li{ font-size: 12px; color: rgba(var(--w-ink-rgb),.62); padding-left: 18px; position: relative; } .watch-passhelper__list li:before{ content: "•"; position: absolute; left: 6px; top: 0; color: rgba(var(--w-ink-rgb),.35); } .watch-passhelper__list li.is-ok{ color: rgba(120, 255, 170, .92); } .watch-passhelper__list li.is-ok:before{ content: "✓"; color: rgba(120, 255, 170, .92); } .watch-passhelper__mismatch{ margin-top: 8px; font-size: 12px; font-weight: 900; color: rgba(255, 110, 110, .95); } .watch-btn.is-disabled{ opacity: .55; pointer-events: none; } /* ============================= Watch Party (Совместный просмотр) ============================= */ .watch-party-modal .watch-searchmodal__panel{ width: min(560px, calc(100vw - 24px)); } .watch-party-btn{width:100%;} .watch-party-btn .watch-mi{font-size:20px;line-height:1;} .watch-party__title{font-size:18px;font-weight:950;letter-spacing:-.02em;} .watch-party__sub{margin-top:2px;color:rgba(var(--w-ink-rgb),.7);font-size:13px;} .watch-party__box{margin-top:14px;display:grid;gap:10px;} .watch-party__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .watch-party__input{ flex:1; min-width: 240px; border-radius: 14px; border: 1px solid rgba(var(--w-ink-rgb), .14); background: rgba(var(--w-ink-rgb), .04); padding: 12px 12px; color: var(--w-text); font-size: 13px; } .watch-party__btn{ appearance:none;border:0;cursor:pointer; border-radius:14px; padding:12px 14px; font-weight:950; background: rgba(var(--w-ink-rgb), .10); color: var(--w-text); display:flex;gap:8px;align-items:center; } .watch-party__btn:hover{ background: rgba(var(--w-ink-rgb), .14); } .watch-party__hint{font-size:12px;color:rgba(var(--w-ink-rgb),.62);line-height:1.35;} .watch-party__list{margin-top:6px;border-top:1px solid rgba(var(--w-ink-rgb),.10);padding-top:10px;} .watch-party__listHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;} .watch-party__listTitle{font-size:13px;font-weight:950;color:rgba(var(--w-ink-rgb),.86);} .watch-party__badge{font-size:11px;font-weight:950;padding:6px 10px;border-radius:999px;background:rgba(var(--w-ink-rgb),.10);color:rgba(var(--w-ink-rgb),.86);} .watch-party__users{display:grid;gap:8px;} .watch-party__user{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 12px;border-radius:14px; border:1px solid rgba(var(--w-ink-rgb),.10); background: rgba(var(--w-ink-rgb), .04); } .watch-party__name{font-weight:900;font-size:13px;} .watch-party__meta{font-size:12px;color:rgba(var(--w-ink-rgb),.65);display:flex;gap:10px;align-items:center;} .watch-party__dot{width:8px;height:8px;border-radius:999px;background:rgba(120,255,170,.8);} .watch-party__dot.is-stale{background:rgba(255,110,110,.75);} /* Player notice */ .player-note{ margin-top:12px; padding:10px 12px; border-radius:10px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.35; } /* ===== Watch: settings avatar/banner media controls (static safety) ===== */ .watch-settings__mediaBtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .watch-settings__mediaBtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:inherit;font:inherit;font-weight:700;cursor:pointer;transition:.15s ease} .watch-settings__mediaBtn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)} .watch-settings__mediaBtn:disabled{opacity:.55;cursor:default} .watch-settings__mediaHidden{display:none !important} .watch-settings__row[data-watch-media-row] input[type="file"]{display:none !important;visibility:hidden !important;position:absolute !important;left:-9999px !important} .watch-settings__row[data-watch-media-row] .qq-upload-button, .watch-settings__row[data-watch-media-row] .qq-uploader{display:none !important} .watch-settings__mediaStatus{margin-top:8px;font-size:12px;opacity:.85} .watch-settings__mediaStatus.is-error{color:#ff6b6b;opacity:1} .watch-settings__mediaStatus.is-ok{color:#34d06f;opacity:1} .watch-settings__mediaStatus.is-loading{color:#8ab4ff;opacity:1} html[data-watch-theme="light"] .watch-settings__mediaBtn{border-color:rgba(20,24,31,.12);background:rgba(20,24,31,.02)} html[data-watch-theme="light"] .watch-settings__mediaBtn:hover{background:rgba(20,24,31,.05);border-color:rgba(20,24,31,.18)} /* ===== Watch: banner/avatar quick upload (click area) ===== */ .watch-profile__cover{ position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } /* File input must be visually hidden (we click it via ) */ .watch-profile__file{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; } /* Click layer over banner/avatar */ .watch-profile__uploadOverlay{ position:absolute; inset:0; z-index:5; cursor:pointer; border-radius:inherit; } .watch-profile__avatar .watch-profile__uploadOverlay{ border-radius:999px; } /* Hide native file input chrome (just in case opacity is overridden somewhere) */ .watch-profile__file::-webkit-file-upload-button{ visibility:hidden; } .watch-profile__file::file-selector-button{ visibility:hidden; } .watch-profile__file{ border:0; background:transparent; color:transparent; } /* Only profile owner can interact */ .watch-profile:not(.is-owner) .watch-profile__file{ display:none !important; } .watch-profile:not(.is-owner) .watch-profile__uploadOverlay{ pointer-events:none !important; cursor:default !important; } .watch-profile__banner-edit{ position:absolute; right:14px; bottom:14px; width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; z-index:2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity:.0; transform: translateY(4px); transition: .18s ease; cursor:pointer; } .watch-profile__cover:hover .watch-profile__banner-edit{ opacity:1; transform: translateY(0); } .watch-profile__banner-edit:active{ transform: translateY(1px) scale(.98); } /* Darken on hover (owner only) */ .watch-profile__cover::after{ content:''; position:absolute; inset:0; background: rgba(0,0,0,.42); opacity:0; transition: opacity .18s ease; pointer-events:none; z-index:1; } /* Neat camera icon hint (owner only) */ .watch-profile__cover::before{ content:''; position:absolute; left:50%; top:50%; width:46px; height:46px; transform:translate(-50%,-50%) scale(.98); border-radius:14px; background: rgba(0,0,0,.38) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M23%2019a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h4l2-3h6l2%203h4a2%202%200%200%201%202%202z'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='4'/%3E%3C/svg%3E") center/20px 20px no-repeat; border:1px solid rgba(255,255,255,.16); opacity:0; transition: opacity .18s ease, transform .18s ease; pointer-events:none; z-index:2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .watch-profile.is-owner .watch-profile__cover:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); } .watch-profile.is-owner .watch-profile__cover:hover::after{ opacity:1; } .watch-profile__cover--uploading::after{ opacity:1; } /* Avatar hover darkening (owner only) */ .watch-profile__avatar{ position:relative; } .watch-profile__avatarImg{ position:relative; overflow:hidden; } .watch-profile__avatarImg::after{ content:''; position:absolute; inset:0; background: rgba(0,0,0,.42); opacity:0; transition: opacity .18s ease; pointer-events:none; } .watch-profile.is-owner .watch-profile__avatar:hover .watch-profile__avatarImg::after{ opacity:1; } /* Avatar camera hint */ .watch-profile__avatarImg::before{ content:''; position:absolute; right:6px; bottom:6px; width:40px; height:40px; border-radius:14px; background: rgba(0,0,0,.38) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M23%2019a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h4l2-3h6l2%203h4a2%202%200%200%201%202%202z'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='4'/%3E%3C/svg%3E") center/18px 18px no-repeat; border:1px solid rgba(255,255,255,.16); opacity:0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; pointer-events:none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .watch-profile.is-owner .watch-profile__avatar:hover .watch-profile__avatarImg::before{ opacity:1; transform: translateY(0); } /* Safety: hide any old pencil edit buttons if markup is cached */ .watch-profile__banner-edit, .watch-profile__avatar-edit{ display:none !important; } /* Ensure avatar overlay input is circular */ .watch-profile__file--avatar{ border-radius:999px; } .watch-profile__avatar-edit{ position:absolute; right:6px; bottom:6px; width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity:0; transform: translateY(4px); transition: .18s ease; cursor:pointer; z-index:2; } .watch-profile__avatar:hover .watch-profile__avatar-edit{ opacity:1; transform: translateY(0); } .watch-profile__avatar-edit:active{ transform: translateY(1px) scale(.98); } /* Upload feedback (avatar) */ .watch-profile__avatarImg.is-uploading::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .watch-profile__avatarImg.is-uploading::before{ content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:999px; border:2px solid rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.92); animation: watchSpin .7s linear infinite; z-index:3; } /* Final override: we do NOT use pencil buttons at all */ .watch-profile__banner-edit, .watch-profile__avatar-edit{ display:none !important; } @keyframes watchSpin{ to{ transform: rotate(360deg);} } .watch-lockwrap{ position:relative; border-radius:18px; } .watch-lockwrap__blur{ filter: blur(2px); opacity:.55; pointer-events:none; } .watch-lockwrap__hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; border-radius:18px; background:rgba(0,0,0,.35); color:#fff; font-weight:600; line-height:1.25; } /* header locked button */ .watch-nav__locked{ position:relative; display:inline-flex; align-items:center; } .watch-nav__locked .watch-nav__item{ filter: blur(1.3px); opacity:.6; pointer-events:none; } .watch-nav__locked .watch-nav__locked-hint{ position:absolute; top: calc(100% + 10px); right:0; max-width: 260px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(10,10,10,.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color:#fff; font-size:12px; line-height:1.2; opacity:0; transform: translateY(-4px); transition: .16s ease; pointer-events:none; z-index: 9999; } .watch-nav__locked:hover .watch-nav__locked-hint{ opacity:1; transform: translateY(0); } /* ========================= Settings modal (Watch) ========================= */ .watch-settingsmodal{ position: fixed; inset: 0; z-index: 20000; display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; } body.watch-settingsmodal-open .watch-settingsmodal, .watch-settingsmodal.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; } .watch-settingsmodal__overlay{ position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); opacity: 0; transition: opacity .22s ease; } body.watch-settingsmodal-open .watch-settingsmodal__overlay, .watch-settingsmodal.is-open .watch-settingsmodal__overlay{ opacity: 1; } .watch-settingsmodal__panel{ position: relative; width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: 12px auto; overflow: auto; border-radius: 22px; background: transparent; border: 0 !important; box-shadow: none; transform: translateY(10px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; } body.watch-settingsmodal-open .watch-settingsmodal__panel, .watch-settingsmodal.is-open .watch-settingsmodal__panel{ transform: translateY(0) scale(1); opacity: 1; } .watch-settingsmodal > .watch-settingsmodal__panel > .watch-settingsmodal__close{ display: none !important; } .watch-settingsmodal__close{ width: 40px; height: 40px; border-radius: 12px; border: 0 !important; background: rgba(var(--w-ink-rgb),.08); color: rgba(var(--w-ink-rgb),.92); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, transform .18s ease; } .watch-settingsmodal__close:hover{ background: rgba(var(--w-ink-rgb),.14); transform: scale(1.03); } .watch-settingsmodal__body{ padding: 0; } .watch-settingsmodal .watch-settings{ padding: 0; max-width: none; margin: 0; } .watch-settingsmodal .watch-settings__card{ background: transparent !important; box-shadow: none !important; } .watch-settingsmodal__loading{ display: grid; place-items: center; gap: 10px; padding: 44px 12px; } .watch-settingsmodal__spinner{ width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.65); animation: watchspin .9s linear infinite; } @keyframes watchspin { to { transform: rotate(360deg); } } .watch-settingsmodal__error{ padding: 18px; border-radius: 14px; border: 0 !important; background: rgba(255,0,0,.07); } .watch-settingsmodal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .watch-settingsmodal__title{ margin:0; font-size:34px; line-height:1.04; font-weight:900; letter-spacing:-.02em; color:var(--w-text); } .watch-settingsmodal__msg{ margin-bottom:12px; padding:10px 12px; border-radius:12px; border:0 !important; background:rgba(var(--w-ink-rgb),.08); color:rgba(var(--w-ink-rgb),.9); } .watch-settingsmodal__grid{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; } .watch-settingsmodal__tabs{ display:flex; flex-direction:column; gap:8px; } .watch-settingsmodal__tab{ appearance:none; width:100%; min-height:44px; padding:10px 12px; text-align:left; border-radius:16px; border:0 !important; background:rgba(var(--w-ink-rgb),.06); color:rgba(var(--w-ink-rgb),.86); font-size:15px; font-weight:800; cursor:pointer; transition:background .18s ease, color .18s ease, transform .18s ease; } .watch-settingsmodal__tab:hover{ transform:translateY(-1px); background:rgba(var(--w-ink-rgb),.10); } .watch-settingsmodal__tab.is-active{ background:rgba(var(--w-ink-rgb),.12); color:var(--w-text); } .watch-settingsmodal__panes{ min-height:320px; } .watch-settingsmodal__pane{ display:none; } .watch-settingsmodal__pane.is-active{ display:block; } .watch-settingsmodal__note{ color:rgba(var(--w-ink-rgb),.66); } @media (max-width:980px){ .watch-settingsmodal__grid{ grid-template-columns:1fr; } .watch-settingsmodal__tabs{ flex-direction:row; overflow-x:auto; } .watch-settingsmodal__tab{ width:auto; min-width:170px; white-space:nowrap; } } /* /settings should look like “empty background + modal” */ body.watch-settings-standalone .watch-header, body.watch-settings-standalone .watch-page, body.watch-settings-standalone .watch-footer{ display: none !important; } /* Settings modal iframe */ .watch-settingsmodal__iframe{width:100%;height:70vh;border:0;border-radius:12px;background:transparent;} html.watch-settings-open{overflow-y:auto; overflow-x:hidden;} body.watch-standalone-settings header, body.watch-standalone-settings .watch-page{display:none !important;} /* ------------------------------------------------------------ Watch settings: avatar cropper (no external libs) ------------------------------------------------------------- */ .watch-avatar-previews{display:flex;gap:14px;align-items:flex-end;margin-top:12px} .watch-avatar-previews__item{display:flex;flex-direction:column;align-items:center;gap:6px} .watch-avatar-previews__item img{display:block;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);width:184px;height:184px;object-fit:cover} .watch-avatar-previews__item:nth-child(2) img{width:64px;height:64px;border-radius:14px} .watch-avatar-previews__item:nth-child(3) img{width:32px;height:32px;border-radius:10px} .watch-avatar-crop{margin-top:12px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22)} .watch-avatar-crop__stage{display:flex;align-items:center;justify-content:center} .watch-avatar-crop__stage canvas{border-radius:18px;max-width:100%;height:auto;touch-action:none} .watch-avatar-crop__controls{display:flex;flex-direction:column;gap:12px;margin-top:12px} .watch-avatar-crop__btns{display:flex;gap:10px;justify-content:flex-end} /* Patch: keep year/genres/countries clickable but not blue */ .watch-meta-row a, .watch-meta-row a:visited, .watch-meta-v a, .watch-meta-v a:visited { color: #ffffff !important; text-decoration: none; } .watch-meta-row a:hover, .watch-meta-v a:hover { color: #ffffff !important; text-decoration: underline; opacity: 0.9; } /* --- PATCH: make year/genre/country links white but clickable --- */ .watch-meta-v a, .watch-meta-v a:visited, .watch-meta-v a:active, .watch-meta-v a:hover, .watch-meta a, .watch-meta a:visited, .watch-meta a:active, .watch-meta a:hover { color: rgba(var(--w-ink-rgb), .92) !important; } .watch-meta-v a, .watch-meta a { text-decoration: none !important; } .watch-meta-v a:hover, .watch-meta a:hover { text-decoration: underline !important; } /* ===== PATCH: category titles act as "Смотреть всё" links ===== */ .watch-block__titleLink{ color: var(--w-text) !important; text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; } .watch-block__titleLink:visited{ color: var(--w-text) !important; } .watch-block__titleLink:hover{ color: var(--w-text) !important; text-decoration: underline; text-underline-offset: 4px; } .watch-block__titleLink:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(91,108,255,.22); border-radius: 10px; } /* ===== PATCH: remove pill outline in idle state; show on hover ===== */ .watch-topnav__item, .watch-searchbtn, .watch-iconbtn{ border: 1px solid transparent !important; } .watch-topnav__item:hover, .watch-searchbtn:hover, .watch-iconbtn:hover{ border-color: rgba(var(--w-ink-rgb),.14) !important; } /* ===== Watch crop modal (avatar/banner) ===== */ .watch-cropmodal{position:fixed;inset:0;z-index:10000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s;} body.watch-cropmodal-open .watch-cropmodal{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease;} .watch-cropmodal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .18s ease;} body.watch-cropmodal-open .watch-cropmodal__overlay{opacity:1;} .watch-cropmodal__panel{position:relative;z-index:1;width:min(980px, calc(100vw - 28px));margin: clamp(12px, 4vh, 40px) auto; border-radius: 26px; border:1px solid rgba(var(--w-ink-rgb),.14); background: rgba(var(--w-bg-rgb), .92); box-shadow: 0 28px 90px rgba(0,0,0,.55); overflow:hidden;} html[data-watch-theme="light"] .watch-cropmodal__panel{background: rgba(255,255,255,.92);} .watch-cropmodal__close{position:absolute;right:14px;top:12px;width:42px;height:42px;border-radius:14px;border:1px solid rgba(var(--w-ink-rgb),.12);background:rgba(var(--w-ink-rgb),.03);color:var(--w-text);cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;} .watch-cropmodal__close:hover{background:rgba(var(--w-ink-rgb),.07);} .watch-cropmodal__head{padding:18px 18px 10px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;} .watch-cropmodal__title{font-size:18px;font-weight:800;color:var(--w-text);} .watch-cropmodal__hint{font-size:12px;color:rgba(var(--w-ink-rgb),.7);} .watch-cropmodal__body{padding:14px 18px 6px 18px;display:grid;grid-template-columns: 1fr 320px;gap:16px;} @media (max-width: 860px){ .watch-cropmodal__body{grid-template-columns:1fr;} } .watch-cropmodal__canvasWrap{border-radius:22px;border:1px solid rgba(var(--w-ink-rgb),.14);background:rgba(var(--w-ink-rgb),.03);display:flex;align-items:center;justify-content:center;padding:14px;min-height: 280px;} .watch-cropmodal__stage{position:relative;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.25);} .watch-cropmodal__stage canvas{display:block;max-width:100%;height:auto;touch-action:none;} .watch-cropmodal__tools{border-radius:22px;border:1px solid rgba(var(--w-ink-rgb),.14);background:rgba(var(--w-ink-rgb),.03);padding:14px;display:flex;flex-direction:column;gap:12px;} .watch-cropmodal__toolRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .watch-cropmodal__toolBtn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(var(--w-ink-rgb),.12);background:rgba(var(--w-bg-rgb),.85);color:var(--w-text);cursor:pointer;font-weight:700;font-size:13px;} html[data-watch-theme="light"] .watch-cropmodal__toolBtn{background:rgba(255,255,255,.85);} .watch-cropmodal__toolBtn:hover{background:rgba(var(--w-ink-rgb),.07);} .watch-cropmodal__toolBtn .watch-mi{font-size:20px;} .watch-cropmodal__label{font-size:12px;color:rgba(var(--w-ink-rgb),.7);margin-right:4px;} .watch-cropmodal__zoom{width:100%;} .watch-cropmodal__footer{padding:12px 18px 18px 18px;display:flex;justify-content:flex-end;gap:10px;} .watch-cropmodal__ico{width:20px;height:20px;display:block;flex:0 0 auto;opacity:.92} .watch-cropmodal__close .watch-cropmodal__ico{width:18px;height:18px} .watch-cropmodal__meta{font-size:12px;color:rgba(var(--w-ink-rgb),.65);text-align:right;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width: 860px){.watch-cropmodal__meta{max-width:none;text-align:left}} .watch-cropmodal__subtitle{font-size:12px;font-weight:800;color:rgba(var(--w-ink-rgb),.82);margin-bottom:10px;letter-spacing:.2px} .watch-cropmodal__out{margin-top:10px;font-size:12px;color:rgba(var(--w-ink-rgb),.7)} .watch-cropmodal__preview{padding-bottom:8px;border-bottom:1px solid rgba(var(--w-ink-rgb),.12)} .watch-cropmodal__previewAvatar{display:flex;align-items:center;gap:12px} .watch-cropmodal__previewCircle{width:88px;height:88px;border-radius:999px;overflow:hidden;border:1px solid rgba(var(--w-ink-rgb),.14);background:rgba(0,0,0,.22);box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)} .watch-cropmodal__previewSmall{width:52px;height:52px;border-radius:16px;overflow:hidden;border:1px solid rgba(var(--w-ink-rgb),.14);background:rgba(0,0,0,.22);box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)} .watch-cropmodal__previewWide{width:100%;aspect-ratio: 4 / 1;border-radius:18px;overflow:hidden;border:1px solid rgba(var(--w-ink-rgb),.14);background:rgba(0,0,0,.22);box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)} .watch-cropmodal__previewCircle canvas, .watch-cropmodal__previewSmall canvas, .watch-cropmodal__previewWide canvas{display:block;width:100%;height:100%} .watch-cropmodal.is-avatar .watch-cropmodal__previewBanner{display:none} .watch-cropmodal.is-banner .watch-cropmodal__previewAvatar{display:none} .watch-cropmodal__stage{box-shadow: 0 18px 60px rgba(0,0,0,.35)} .watch-cropmodal__mask{position:absolute;inset:0;pointer-events:none;display:none} .watch-cropmodal.is-avatar .watch-cropmodal__mask{ display:block; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 46%, rgba(0,0,0,.45) 48% 100%); } .watch-cropmodal__zoomRow{gap:12px} .watch-cropmodal__zoom{ -webkit-appearance:none; appearance:none; height:34px; background: transparent; } .watch-cropmodal__zoom::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(var(--w-ink-rgb),.18)} .watch-cropmodal__zoom::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:999px;background:rgba(var(--w-bg-rgb),.98);border:1px solid rgba(var(--w-ink-rgb),.25);margin-top:-6px;box-shadow:0 6px 18px rgba(0,0,0,.25)} .watch-cropmodal__zoom::-moz-range-track{height:6px;border-radius:999px;background:rgba(var(--w-ink-rgb),.18)} .watch-cropmodal__zoom::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:rgba(var(--w-bg-rgb),.98);border:1px solid rgba(var(--w-ink-rgb),.25);box-shadow:0 6px 18px rgba(0,0,0,.25)} /* ========================================================= PATCH 2026-02-18 1) Главная: заголовки категорий выглядят как кнопки (без подчёркивания) 2) Верхнее меню: обводка только при наведении 3) Кроп-модалка: строго по центру + более мягкий blur/backdrop ========================================================= */ /* 1) Category titles (Films/Serials/Anime/Cartoons/4K) as pill buttons */ .watch-block__titleLink{ display:inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 16px; text-decoration: none !important; color: var(--w-text) !important; line-height: 1; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); transition: background .16s ease, border-color .16s ease, transform .16s ease; } html[data-watch-theme="light"] .watch-block__titleLink{ border-color: rgba(0,0,0,.16); background: rgba(0,0,0,.05); } .watch-block__titleLink:hover, .watch-block__titleLink:focus{ text-decoration: none !important; border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.08); } html[data-watch-theme="light"] .watch-block__titleLink:hover, html[data-watch-theme="light"] .watch-block__titleLink:focus{ border-color: rgba(0,0,0,.26); background: rgba(0,0,0,.08); } /* убираем наследуемое подчёркивание даже если есть глобальные правила */ .watch-block__titleLink *, .watch-block__titleLink:hover *, .watch-block__titleLink:focus *{ text-decoration: none !important; } /* 2) Topbar buttons: no outline in idle */ .watch-topnav__item, .watch-searchbtn, .watch-iconbtn{ border-color: transparent !important; } .watch-topnav__item:hover, .watch-topnav__item:focus, .watch-searchbtn:hover, .watch-searchbtn:focus, .watch-iconbtn:hover, .watch-iconbtn:focus{ border-color: rgba(var(--w-ink-rgb), .14) !important; } /* 3) Crop modal: real centered dialog + nicer backdrop */ .watch-cropmodal{ display:flex; align-items:center; justify-content:center; padding: 22px; overscroll-behavior: contain; } .watch-cropmodal__overlay{ background: rgba(0,0,0,.60) !important; backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); } html[data-watch-theme="light"] .watch-cropmodal__overlay{ background: rgba(255,255,255,.58) !important; } .watch-cropmodal__panel{ margin: 0 !important; max-height: calc(100vh - 44px); transform: translateY(12px) scale(.985); opacity: 0; transition: transform .22s ease, opacity .22s ease; } body.watch-cropmodal-open .watch-cropmodal__panel{ transform: translateY(0) scale(1); opacity: 1; } /* чуть более "премиальный" вид шапки */ .watch-cropmodal__head{ background: linear-gradient(180deg, rgba(var(--w-ink-rgb),.06), rgba(var(--w-ink-rgb),0)); } /* Premium-only edit affordance (Admin inherits Premium) */ .watch-profile.is-owner:not([data-watch-premium="1"]) .watch-profile__uploadOverlay{ pointer-events: none !important; cursor: default !important; } .watch-profile.is-owner:not([data-watch-premium="1"]) .watch-profile__cover::before, .watch-profile.is-owner:not([data-watch-premium="1"]) .watch-profile__cover::after{ content: none !important; } .watch-profile.is-owner:not([data-watch-premium="1"]) .watch-profile__avatarImg::before, .watch-profile.is-owner:not([data-watch-premium="1"]) .watch-profile__avatarImg::after{ content: none !important; } /* ===== Search modal redesign (centered + blur + smooth animation) ===== */ #watchSearchModal.watch-searchmodal--modern{ position: fixed !important; inset: 0 !important; z-index: 32000 !important; display: block !important; padding: clamp(14px, 2.8vw, 34px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .56s cubic-bezier(.22,1,.36,1), visibility 0s linear .56s; } #watchSearchModal.watch-searchmodal--modern.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .56s cubic-bezier(.22,1,.36,1); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ position: absolute; inset: 0; opacity: 0; background: radial-gradient(1200px 700px at 50% 45%, rgba(110,110,110,.12), transparent 62%), rgba(0,0,0,.38); backdrop-filter: blur(0px) saturate(1.10); -webkit-backdrop-filter: blur(0px) saturate(1.10); transition: opacity .62s cubic-bezier(.22,1,.36,1), backdrop-filter .62s cubic-bezier(.22,1,.36,1), -webkit-backdrop-filter .62s cubic-bezier(.22,1,.36,1); } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__overlay{ opacity: 1; backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ background: radial-gradient(1200px 700px at 50% 45%, rgba(255,255,255,.22), transparent 62%), rgba(255,255,255,.32); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ position: absolute !important; top: 50% !important; left: 50% !important; inset: auto !important; margin: 0 !important; width: min(980px, calc(100vw - 28px)); min-height: min(560px, calc(100vh - 56px)); max-height: min(760px, calc(100vh - 28px)); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: rgba(17,18,21,.92); box-shadow: 0 28px 90px rgba(0,0,0,.52), 0 6px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04); transform: translate(-50%, -50%) translateY(18px) scale(.98); opacity: 0; transition: transform .62s cubic-bezier(.22,1,.36,1), opacity .62s cubic-bezier(.22,1,.36,1), box-shadow .62s cubic-bezier(.22,1,.36,1); } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__panel{ transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 1; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ background: rgba(246,247,250,.95); border-color: rgba(0,0,0,.08); box-shadow: 0 28px 90px rgba(10,14,20,.16), 0 6px 22px rgba(10,14,20,.10), inset 0 1px 0 rgba(255,255,255,.70); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), rgba(17,18,21,.92); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ border-bottom-color: rgba(0,0,0,.06); background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.66)), rgba(246,247,250,.92); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ border-color: rgba(0,0,0,.08); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ height: 44px; min-width: 0; padding: 0 14px; border: 0; outline: 0; border-radius: 12px; background: rgba(255,255,255,.03); color: inherit; font-weight: 600; font-size: 15px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input::placeholder{ color: rgba(var(--w-ink-rgb), .48); font-weight: 500; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background: rgba(0,0,0,.025); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: inherit; display: inline-flex; align-items: center; justify-content: center; transition: transform .24s ease, background .24s ease, border-color .24s ease, opacity .24s ease; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:focus, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:focus{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); transform: translateY(-1px); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ border-color: rgba(0,0,0,.08); background: rgba(255,255,255,.65); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:hover, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:hover{ background: rgba(255,255,255,.95); border-color: rgba(0,0,0,.14); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 0; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ min-height: 0; overflow: auto; padding: 14px; background: rgba(10,10,12,.78); border-right: 1px solid rgba(255,255,255,.05); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ background: rgba(255,255,255,.70); border-right-color: rgba(0,0,0,.06); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ min-height: 0; overflow: auto; padding: 18px 18px 16px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), rgba(22,23,27,.86); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.50)), rgba(243,245,248,.92); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filtersTitle{ font-size: 15px; font-weight: 800; letter-spacing: .02em; margin: 0 0 20px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filterLabel{ font-size: 13px; font-weight: 800; color: rgba(var(--w-ink-rgb), .82); margin: 0 0 10px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filterGroup{ display: grid; gap: 9px; margin-bottom: 16px; } #watchSearchModal.watch-searchmodal--modern .watch-check{ display: flex; align-items: center; gap: 9px; padding: 6px 2px; border-radius: 10px; } #watchSearchModal.watch-searchmodal--modern .watch-check:hover{ background: rgba(var(--w-ink-rgb), .035); } #watchSearchModal.watch-searchmodal--modern .watch-check input{ width: 18px; height: 18px; accent-color: #8ea0ff; cursor: pointer; } #watchSearchModal.watch-searchmodal--modern .watch-check span{ font-weight: 600; color: rgba(var(--w-ink-rgb), .82); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__range{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 14px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeDash{ opacity: .55; font-weight: 700; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput{ width: 100%; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: inherit; padding: 0 10px; outline: none; font-weight: 600; appearance: textfield; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput::-webkit-outer-spin-button, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput:focus{ border-color: rgba(134,153,255,.55); box-shadow: 0 0 0 3px rgba(134,153,255,.14); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput{ border-color: rgba(0,0,0,.08); background: rgba(255,255,255,.7); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__searchModeHint{ margin-top: 8px; margin-bottom: auto; font-size: 12px; line-height: 1.45; color: rgba(var(--w-ink-rgb), .58); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__searchModeHint b{ color: rgba(var(--w-ink-rgb), .84); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset{ margin-top: 16px; width: 100%; min-height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); font-weight: 700; transition: transform .24s ease, border-color .24s ease, background .24s ease; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset:focus{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset{ border-color: rgba(0,0,0,.08); background: rgba(255,255,255,.72); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset:hover{ border-color: rgba(0,0,0,.14); background: rgba(255,255,255,.95); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ min-height: 68px; display: flex; align-items: center; justify-content: flex-start; padding: 16px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.08); background: rgba(255,255,255,.02); color: rgba(var(--w-ink-rgb), .62); line-height: 1.45; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint b{ color: rgba(var(--w-ink-rgb), .86); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ border-color: rgba(0,0,0,.08); background: rgba(255,255,255,.55); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__list{ display: flex; flex-direction: column; gap: 8px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item{ display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 12px; padding: 8px; border-radius: 14px; border: 1px solid transparent; text-decoration: none; color: inherit; background: rgba(255,255,255,.01); transition: transform .24s ease, background .24s ease, border-color .24s ease; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:focus{ background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.09); transform: translateY(-1px); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item{ background: rgba(255,255,255,.36); } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover{ background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.08); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb{ width: 56px; height: 70px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb--user{ width: 48px; height: 48px; border-radius: 50%; margin-left: 4px; background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%), rgba(255,255,255,.04); position: relative; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb--user.is-fallback::before{ content: "person"; font-family: "Material Icons Outlined"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; color: rgba(var(--w-ink-rgb), .46); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item.is-user{ grid-template-columns: 56px minmax(0,1fr); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__meta{ min-width: 0; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__name{ font-weight: 700; font-size: 14px; line-height: 1.25; color: rgba(var(--w-ink-rgb), .95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__sub{ margin-top: 3px; font-size: 12px; line-height: 1.25; color: rgba(var(--w-ink-rgb), .56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* skeleton loading (like reference video) */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonList{ display: flex; flex-direction: column; gap: 10px; padding: 4px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem{ display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.012); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine{ position: relative; overflow: hidden; background: rgba(255,255,255,.06); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after{ content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 0 35%, rgba(255,255,255,.18) 50%, transparent 65% 100%); animation: watchSearchShimmer 1.15s linear infinite; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb{ width: 56px; height: 70px; border-radius: 10px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonMeta{ min-width: 0; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine{ height: 14px; border-radius: 999px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine + .watch-searchmodal__skeletonLine{ margin-top: 8px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine--sm{ height: 10px; opacity: .8; } @keyframes watchSearchShimmer{ 0%{ transform: translateX(-120%); } 100%{ transform: translateX(120%); } } @media (prefers-reduced-motion: reduce){ #watchSearchModal.watch-searchmodal--modern, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after{ animation: none !important; } } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results::-webkit-scrollbar, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::-webkit-scrollbar{ width: 10px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results::-webkit-scrollbar-thumb, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results::-webkit-scrollbar-thumb, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.14); background-clip: content-box; } @media (max-width: 980px){ #watchSearchModal.watch-searchmodal--modern{ padding: 10px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: calc(100vw - 20px); min-height: min(620px, calc(100vh - 20px)); max-height: calc(100vh - 20px); border-radius: 18px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns: 1fr; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.05); min-height: 270px; max-height: 55vh; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ border-bottom-color: rgba(0,0,0,.06); } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ max-height: 34vh; } } @media (max-width: 640px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ gap: 8px; padding: 6px; border-radius: 14px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ height: 40px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ width: 40px; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding: 14px; } } /* ===== Search modal v3 safety fix: force viewport centering + full-screen overlay ===== */ #watchSearchModal.watch-searchmodal--modern{ position: fixed !important; inset: 0 !important; margin: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translate3d(-50%, -50%, 0) translateY(18px) scale(.98) !important; } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__panel{ transform: translate3d(-50%, -50%, 0) translateY(0) scale(1) !important; } @media (max-width: 980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: calc(100vw - 20px) !important; max-height: calc(100vh - 20px) !important; } } /* ===== Search modal v4 visual alignment (reference style) ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: min(840px, calc(100vw - 28px)) !important; min-height: min(610px, calc(100vh - 56px)) !important; max-height: min(760px, calc(100vh - 28px)) !important; border-radius: 14px !important; border: 0 !important; background: rgba(19,20,24,.90) !important; box-shadow: 0 24px 72px rgba(0,0,0,.42), 0 4px 18px rgba(0,0,0,.22) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns: minmax(0, 1fr) auto !important; justify-content: center !important; gap: 10px !important; padding: 14px 14px 10px !important; border: 0 !important; background: rgba(0,0,0,0) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ max-width: 720px !important; width: 100% !important; margin: 0 auto !important; padding: 6px !important; gap: 8px !important; border-radius: 10px !important; border: 0 !important; background: rgba(255,255,255,.03) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ height: 38px !important; border-radius: 8px !important; border: 0 !important; background: rgba(255,255,255,.02) !important; font-size: 14px !important; font-weight: 500 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ width: 38px !important; height: 38px !important; border-radius: 8px !important; border: 0 !important; background: rgba(255,255,255,.035) !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:focus, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:focus{ border: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.06) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns: minmax(0,1fr) 280px !important; border: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ padding: 8px 12px 12px !important; border-right: 0 !important; background: rgba(10,10,12,.72) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding: 16px 16px 14px !important; border: 0 !important; background: rgba(255,255,255,.02) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filtersTitle{ text-align: center !important; font-size: 14px !important; margin: 2px 0 16px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filterLabel{ margin: 0 0 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-check{ padding: 4px 0 !important; border-radius: 0 !important; background: transparent !important; } #watchSearchModal.watch-searchmodal--modern .watch-check:hover{ background: transparent !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput{ height: 32px !important; border-radius: 10px !important; border: 0 !important; background: rgba(255,255,255,.045) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput:focus{ border: 0 !important; box-shadow: inset 0 0 0 1px rgba(134,153,255,.45), 0 0 0 2px rgba(134,153,255,.10) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__searchModeHint, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset{ display: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ min-height: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 6px 2px !important; color: transparent !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint:empty{ padding: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem{ border: 0 !important; border-radius: 10px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:focus{ border: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb{ border-radius: 8px !important; box-shadow: none !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ background: rgba(246,247,250,.94) !important; box-shadow: 0 24px 72px rgba(10,14,20,.14), 0 4px 18px rgba(10,14,20,.08) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ background: rgba(0,0,0,.025) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background: rgba(255,255,255,.65) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ background: rgba(255,255,255,.70) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ background: rgba(255,255,255,.64) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ background: rgba(255,255,255,.32) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput{ background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important; } @media (max-width: 980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: calc(100vw - 20px) !important; border-radius: 12px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns: 1fr !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ background: rgba(255,255,255,.02) !important; } } /* ===== Search modal v5 tweaks (top width aligned to divider + blur timing) ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ background: radial-gradient(1200px 700px at 50% 45%, rgba(110,110,110,.11), transparent 62%), rgba(0,0,0,.42) !important; /* Keep blur active even before open; animate only opacity to avoid late "blur loading" after panel animation */ backdrop-filter: blur(22px) saturate(1.14) !important; -webkit-backdrop-filter: blur(22px) saturate(1.14) !important; opacity: 0 !important; will-change: opacity !important; transition: opacity .22s cubic-bezier(.22,1,.36,1) !important; } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__overlay{ opacity: 1 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: min(840px, calc(100vw - 28px)) !important; border-radius: 16px !important; transition: transform .56s cubic-bezier(.22,1,.36,1), opacity .56s cubic-bezier(.22,1,.36,1), box-shadow .56s cubic-bezier(.22,1,.36,1) !important; } /* Top row aligned to body split so search ends exactly at results/filter divider */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ display: grid !important; grid-template-columns: minmax(0,1fr) 260px !important; gap: 0 !important; align-items: start !important; padding: 10px 0 0 0 !important; border-bottom: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), rgba(17,18,21,.92) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::before{ content: ""; grid-column: 1 / 2; align-self: stretch; justify-self: end; width: 1px; margin-right: 0; background: rgba(255,255,255,.05); opacity: 1; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ grid-column: 1 / 2 !important; margin: 0 12px 10px 12px !important; min-width: 0 !important; border: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.02) !important; border-radius: 12px !important; padding: 6px !important; grid-template-columns: minmax(0,1fr) 42px !important; gap: 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ height: 38px !important; border-radius: 8px !important; padding: 0 12px !important; background: rgba(255,255,255,.03) !important; font-size: 14px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ width: 42px !important; height: 42px !important; border-radius: 10px !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; background: rgba(255,255,255,.03) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ grid-column: 2 / 3 !important; justify-self: end !important; align-self: start !important; margin: 0 12px 0 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go:focus, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:focus{ border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; } /* Keep body split aligned with top row width */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns: minmax(0,1fr) 260px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ padding-top: 10px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding-top: 16px !important; } /* No visible placeholder text in empty state */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ color: transparent !important; } /* Light theme parity */ html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.62)), rgba(246,247,250,.92) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::before{ background: rgba(0,0,0,.06) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ background: radial-gradient(1200px 700px at 50% 45%, rgba(255,255,255,.18), transparent 62%), rgba(255,255,255,.36) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ background: rgba(0,0,0,.02) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background: rgba(255,255,255,.68) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important; background: rgba(255,255,255,.72) !important; } @media (max-width: 980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: calc(100vw - 16px) !important; border-radius: 12px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns: 1fr auto !important; padding: 8px 8px 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::before{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ margin: 0 8px 8px 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ margin: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns: 1fr !important; } } /* ===== Search modal topbar v6 (reference-like, no search icon button, fewer layered fields) ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ display:grid !important; grid-template-columns:minmax(0,1fr) 300px !important; align-items:center !important; gap:0 !important; padding:0 !important; border-bottom:0 !important; background:transparent !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ grid-column:1 !important; grid-template-columns:minmax(0,1fr) !important; gap:0 !important; margin:0 !important; padding:14px 14px 10px 14px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ height:42px !important; padding:0 14px !important; border:0 !important; outline:0 !important; border-radius:10px !important; background:rgba(255,255,255,.035) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important; font-size:14px !important; font-weight:600 !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background:rgba(0,0,0,.028) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.045) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ grid-column:2 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:10px !important; min-width:0; padding:14px 14px 10px 14px !important; border-left:1px solid rgba(255,255,255,.05) !important; background:rgba(255,255,255,.01) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ border-left-color:rgba(0,0,0,.06) !important; background:rgba(0,0,0,.008) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topFiltersTitle{ text-align:center; font-weight:800; font-size:15px; letter-spacing:.02em; color:rgba(var(--w-ink-rgb),.92); white-space:nowrap; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ width:42px !important; height:42px !important; border:0 !important; border-radius:10px !important; background:rgba(255,255,255,.035) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:focus{ border:0 !important; background:rgba(255,255,255,.055) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; transform:none !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ background:rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close:hover{ background:rgba(255,255,255,.92) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters > .watch-searchmodal__filtersTitle{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 300px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ padding-top:10px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding-top:10px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset{ display:none !important; } @media (max-width: 980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:minmax(0,1fr) 240px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 240px !important; } } @media (max-width: 760px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns: minmax(0,1fr) auto !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ border-left:0 !important; background:transparent !important; padding-left:0 !important; grid-template-columns:auto !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topFiltersTitle{ display:none !important; } } /* ===== Search modal v7 final visual/behavior fixes ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ transition: opacity .10s linear !important; opacity: 0 !important; background: rgba(0,0,0,.42) !important; backdrop-filter: blur(20px) saturate(1.05) !important; -webkit-backdrop-filter: blur(20px) saturate(1.05) !important; } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__overlay{ opacity:1 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: min(840px, calc(100vw - 28px)) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ display:grid !important; grid-template-columns:minmax(0,1fr) 296px !important; align-items:center !important; gap:0 !important; padding:0 !important; background:#1A1B1F !important; border-bottom:1px solid rgba(255,255,255,.03) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::before{ content:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ grid-column:1 !important; display:block !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ display:block !important; width:100% !important; height:50px !important; margin:0 !important; padding:0 20px !important; border:0 !important; border-radius:0 !important; outline:0 !important; background:#1A1B1F !important; box-shadow:none !important; font-size:14px !important; font-weight:500 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input::placeholder{ color: rgba(255,255,255,.38) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ grid-column:2 !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:0 !important; margin:0 !important; padding:0 16px !important; height:50px !important; border-left:1px solid rgba(255,255,255,.05) !important; background:#1A1B1F !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topFiltersTitle{ width:100% !important; margin:0 !important; text-align:center !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 296px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding-top:0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ min-height:220px; color:transparent !important; } .watch-block__titleLink{ border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; } .watch-block__titleLink:hover, .watch-block__titleLink:focus{ border:0 !important; background:transparent !important; box-shadow:none !important; } @media (max-width: 980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:minmax(0,1fr) 250px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 250px !important; } } @media (max-width: 760px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:1fr !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ height:48px !important; padding:0 14px !important; } } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background:#F4F5F7 !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ background: rgba(255,255,255,.28) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input::placeholder{ color: rgba(0,0,0,.36) !important; } /* ===== Search modal v8 refinements (reference sizing/radius, simultaneous blur, topbar cleanup) ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ opacity: 0 !important; background: rgba(0,0,0,.40) !important; backdrop-filter: blur(18px) saturate(1.04) !important; -webkit-backdrop-filter: blur(18px) saturate(1.04) !important; will-change: opacity !important; transform: translateZ(0) !important; transition: opacity .22s cubic-bezier(.22,1,.36,1) !important; } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__overlay{ opacity: 1 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: min(844px, calc(100vw - 24px)) !important; height: min(720px, calc(100vh - 36px)) !important; min-height: 0 !important; max-height: min(720px, calc(100vh - 36px)) !important; border-radius: 12px !important; border: 0 !important; background: rgba(15,16,19,.94) !important; box-shadow: 0 22px 70px rgba(0,0,0,.46), 0 8px 20px rgba(0,0,0,.24) !important; transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns: minmax(0,1fr) 296px !important; height: 50px !important; min-height: 50px !important; align-items: stretch !important; padding: 0 !important; gap: 0 !important; background: #1A1B1F !important; border-bottom: 0 !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::before{ content: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__form{ display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 0 !important; background: #1A1B1F !important; box-shadow: none !important; font-size: 14px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input::placeholder{ color: rgba(255,255,255,.34) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; height: 50px !important; margin: 0 !important; padding: 0 14px !important; border-left: 1px solid rgba(255,255,255,.05) !important; background: #1A1B1F !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topFiltersTitle{ margin: 0 !important; width: 100% !important; text-align: center !important; font-size: 15px !important; font-weight: 800 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__close, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__go{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns: minmax(0,1fr) 296px !important; height: calc(100% - 50px) !important; min-height: 0 !important; gap: 0 !important; border-top: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ padding: 0 !important; border-right: 1px solid rgba(255,255,255,.05) !important; background: rgba(9,10,12,.92) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding: 18px 16px 16px !important; background: rgba(19,20,24,.88) !important; border-top: 0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters > .watch-searchmodal__filtersTitle{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filterGroup{ margin-top: 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__range{ margin-top: 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rangeInput{ border-radius: 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ color: transparent !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__reset{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item{ border-radius: 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-check input{ border-radius: 5px !important; } .watch-block__titleLink, .watch-block__titleLink:hover, .watch-block__titleLink:focus{ border:0 !important; box-shadow:none !important; background:transparent !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ background: rgba(255,255,255,.24) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ background: rgba(245,246,248,.95) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background: #F4F5F7 !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ border-left-color: rgba(0,0,0,.06) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ background: rgba(255,255,255,.78) !important; border-right-color: rgba(0,0,0,.06) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ background: rgba(240,242,246,.88) !important; } @media (max-width:980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width:calc(100vw - 16px) !important; height:calc(100vh - 24px) !important; max-height:calc(100vh - 24px) !important; border-radius:10px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:minmax(0,1fr) 248px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 248px !important; } } @media (max-width:760px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width:calc(100vw - 10px) !important; height:calc(100vh - 10px) !important; max-height:calc(100vh - 10px) !important; border-radius:8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:1fr !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:1fr !important; height:calc(100% - 50px) !important; } } /* ===== Search modal v15 final overrides ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ transition: opacity .14s cubic-bezier(.22,1,.36,1) !important; transition-delay: 0s !important; background: rgba(0,0,0,.34) !important; backdrop-filter: blur(14px) saturate(1.03) !important; -webkit-backdrop-filter: blur(14px) saturate(1.03) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ width: min(860px, calc(100vw - 24px)) !important; height: min(680px, calc(100vh - 32px)) !important; max-height: min(680px, calc(100vh - 32px)) !important; border-radius: 10px !important; overflow: hidden !important; opacity: 0 !important; transform: translateY(10px) scale(.988) !important; transition: opacity .16s cubic-bezier(.22,1,.36,1), transform .16s cubic-bezier(.22,1,.36,1) !important; } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__panel{ opacity: 1 !important; transform: translateY(0) scale(1) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background:#1A1B1F !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:minmax(0,1fr) 300px !important; height: 48px !important; border-bottom:0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 300px !important; height: calc(100% - 48px) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ border-left:0 !important; box-shadow:none !important; background-image:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ border-right:0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ padding-top:28px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filtersTitle{ display:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ color:transparent !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item{ border:0 !important; box-shadow:none !important; background:rgba(255,255,255,.015) !important; border-radius:10px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:focus-visible{ background:rgba(255,255,255,.03) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb{ overflow:hidden !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb img{ transition: transform .22s cubic-bezier(.22,1,.36,1) !important; will-change: transform; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover .watch-searchmodal__thumb img, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:focus-visible .watch-searchmodal__thumb img{ transform:scale(1.06) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover .watch-searchmodal__name, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover .watch-searchmodal__sub{ transform:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rating{ font-weight:700 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rating.is-low{ color:#ff6767 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rating.is-high{ color:#64d98a !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__rating.is-mid{ color:#d9deea !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__dot{ opacity:.45; } .watch-main .watch-block__title, .watch-main .watch-main__catTitle, .watch-main .watch-main__sectionTitle, .watch-main .watch-main__rowTitle, .watch-main .watch-cats__title, .watch-main .watch-main__catBadge, .watch-main .watch-main__cats .watch-chip, .watch-main .watch-main__cats a, .watch-main .watch-main__section > h2, .watch-main .watch-categoryTitle, .watch-main .watch-main__sTitle { box-shadow:none !important; } .watch-main a[href*="cat="]{ border:0 !important; } @media (max-width:980px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:minmax(0,1fr) 280px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:minmax(0,1fr) 280px !important; } } @media (max-width:760px){ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ grid-template-columns:1fr !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body{ grid-template-columns:1fr !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{ display:none !important; } } /* ===== Search modal v15.1 functional+visual hotfix ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__overlay{ transition: opacity .12s cubic-bezier(.22,1,.36,1) !important; transition-delay: 0s !important; } #watchSearchModal.watch-searchmodal--modern.is-open .watch-searchmodal__overlay{ opacity: 1 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__input{ background: #1A1B1F !important; background-image: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__results{ border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top{ border-bottom: 0 !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body::before, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__body::after, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::before, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__top::after, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::before, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::after{ display:none !important; content:none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__panel{ border-radius: 8px !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item{ border:0 !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item .watch-searchmodal__sub, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item .watch-searchmodal__name{ transition: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__thumb img{ transform-origin: center center !important; transition: transform .18s cubic-bezier(.22,1,.36,1) !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:hover .watch-searchmodal__thumb img, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__item:focus-visible .watch-searchmodal__thumb img{ transform: scale(1.05) !important; } /* remove category borders on main page chips/titles */ .watch-main .watch-cats__item, .watch-main .watch-cats__item a, .watch-main .watch-chip, .watch-main .watch-block__titleLink, .watch-main .watch-block__titleLink:hover, .watch-main .watch-block__titleLink:focus-visible{ border:0 !important; box-shadow:none !important; } /* v15.4 hotfix: unified filter panel color + seam removal */ .watch-searchmodal__modal .watch-searchmodal__head, .watch-searchmodal__modal .watch-searchmodal__filters-title, .watch-searchmodal__modal .watch-searchmodal__filters, .watch-searchmodal__modal .watch-searchmodal__side { background: #1A1B1F !important; } .watch-searchmodal__modal .watch-searchmodal__body { gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; } .watch-searchmodal__modal .watch-searchmodal__side { border-left: none !important; box-shadow: none !important; } .watch-searchmodal__modal .watch-searchmodal__head::after, .watch-searchmodal__modal .watch-searchmodal__filters-title::before, .watch-searchmodal__modal .watch-searchmodal__filters-title::after, .watch-searchmodal__modal .watch-searchmodal__side::before { display: none !important; content: none !important; } /* smoother row hover without text jump */ .watch-searchmodal__result-item, .watch-searchmodal__result-card { transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } .watch-searchmodal__result-item:hover, .watch-searchmodal__result-card:hover { transform: translateY(-1px) !important; } .watch-searchmodal__result-title, .watch-searchmodal__meta { transition: color .18s ease, opacity .18s ease !important; } /* ===== Search modal v17.5 hotfix: right filter bar exact single-color override ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ background: #1A1B1F !important; background-image: none !important; box-shadow: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight::before, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight::after, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::before, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters::after{ content: none !important; display: none !important; background: none !important; } #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ position: relative !important; isolation: isolate !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{ background: #F4F5F7 !important; background-image: none !important; } /* --- UI polish: prevent accidental text selection on clickable elements --- */ a, button, .watch-btn, .watch-btn2, .watch-topbar a, .watch-topbar button, .mcard, .mcard *, .watch-footer a, .watch-footer button{ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } img{ -webkit-user-drag: none; user-select: none; } input, textarea, [contenteditable="true"]{ -webkit-user-select: text; user-select: text; } /* === category arrow: consolidated definition === */ .watch-home .watch-head-arrow{display:none !important;} .watch-home .watch-block__head{ display:flex !important; align-items:center !important; justify-content:flex-start !important; min-height:34px !important; } .watch-home .watch-block__title{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; margin:0 !important; line-height:1.1 !important; } .watch-home .watch-block__titleLink{ display:inline-flex !important; align-items:center !important; line-height:1.1 !important; text-decoration:none !important; } .watch-home .watch-block__titleArrow{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:16px !important; height:16px !important; margin-top:4px !important; padding:0 !important; color:rgba(184,184,184,.92) !important; text-decoration:none !important; background:transparent !important; border:0 !important; box-shadow:none !important; opacity:0 !important; pointer-events:none !important; transform:translateX(-4px) !important; transition:opacity .22s ease, transform .22s ease, color .22s ease !important; } .watch-home .watch-block__titleArrow .watch-mi{ display:block !important; font-size:17px !important; line-height:1 !important; color:inherit !important; } .watch-home .watch-block__head:hover .watch-block__titleArrow, .watch-home .watch-block__head:focus-within .watch-block__titleArrow{ opacity:1 !important; pointer-events:auto !important; transform:translateX(0) !important; } .watch-home .watch-block__titleArrow:hover, .watch-home .watch-block__titleArrow:focus-visible{ opacity:1 !important; color:#fff !important; outline:none !important; } html[data-watch-theme="light"] .watch-home .watch-block__titleArrow, html[data-watch-theme="light"] .watch-home .watch-block__titleArrow .watch-mi{ color:rgba(96,96,96,.92) !important; } html[data-watch-theme="light"] .watch-home .watch-block__titleArrow:hover, html[data-watch-theme="light"] .watch-home .watch-block__titleArrow:focus-visible{ color:rgba(0,0,0,.86) !important; } @media (max-width:760px){ .watch-home .watch-block__title{gap:6px !important;} .watch-home .watch-block__titleArrow{width:14px !important;height:14px !important;margin-top:1px !important;} .watch-home .watch-block__titleArrow .watch-mi{font-size:15px !important;} } /* ===== material frames restore ===== */ .watch-material__framesSection{ margin: 28px 0 0; } .watch-material__sectionTitle{ margin: 0 0 14px; font-size: 28px; font-weight: 900; line-height: 1.1; color: var(--w-text); } .watch-material__framesRaw{ display:block; } .watch-material__framesRail{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding: 2px 2px 10px; scrollbar-width:none; -ms-overflow-style:none; } .watch-material__framesRail::-webkit-scrollbar{ width:0; height:0; display:none; } .watch-material__frame{ flex:0 0 auto; width:260px; aspect-ratio: 16 / 9; padding:0; border:0; border-radius:18px; overflow:hidden; background: rgba(var(--w-ink-rgb), .04); box-shadow: 0 14px 36px rgba(0,0,0,.22); cursor:pointer; } .watch-material__frame img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .18s ease; } .watch-material__frame:hover img{ transform: scale(1.03); } .watch-frames-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:32px; background: rgba(0,0,0,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 20000; } .watch-frames-lightbox.is-open{ display:flex; } .watch-frames-lightbox__img{ display:block; max-width:min(92vw, 1600px); max-height:88vh; border-radius:18px; box-shadow:0 22px 70px rgba(0,0,0,.45); } .watch-frames-lightbox__close{ position:absolute; top:18px; right:18px; width:48px; height:48px; border:0; border-radius:999px; background: rgba(255,255,255,.14); color:#fff; font-size:34px; line-height:1; cursor:pointer; } .watch-frames-lightbox-open, .watch-frames-lightbox-open body{ overflow:hidden; } @media (max-width: 980px){ .watch-material__sectionTitle{font-size:24px} .watch-material__frame{width:220px;border-radius:16px} } @media (max-width: 640px){ .watch-material__framesSection{margin-top:22px} .watch-material__frame{width:180px;border-radius:14px} .watch-frames-lightbox{padding:16px} .watch-frames-lightbox__close{top:12px;right:12px;width:42px;height:42px;font-size:30px} } /* === v101 final UI overrides === */ .rail-wrap:not(.has-overflow) .rail-arrow{ display:none !important; } .rail-wrap.has-overflow .rail-arrow{ opacity:0 !important; pointer-events:none !important; transition:opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important; } .rail-wrap.has-overflow[data-edge-hover="left"] .rail-arrow--prev, .rail-wrap.has-overflow[data-edge-hover="right"] .rail-arrow--next, .rail-wrap.has-overflow:focus-within .rail-arrow{ opacity:1 !important; pointer-events:auto !important; } .rail-wrap.has-overflow .rail-arrow.is-hidden{ opacity:0 !important; pointer-events:none !important; } html[data-watch-theme="light"] .rail-arrow{ background: rgba(255,255,255,.86) !important; color: rgba(20,20,20,.92) !important; border-color: rgba(0,0,0,.14) !important; box-shadow: 0 10px 24px rgba(0,0,0,.10) !important; } html[data-watch-theme="light"] .rail-arrow:hover{ background: rgba(255,255,255,.96) !important; border-color: rgba(0,0,0,.22) !important; } html[data-watch-theme="light"] .watch-home .mcard__img{ box-shadow: 0 10px 24px rgba(0,0,0,.08) !important; } html[data-watch-theme="light"] .watch-home .mcard:hover .mcard__img{ box-shadow: 0 14px 30px rgba(0,0,0,.11) !important; } html.watch-settings-page .watch-settings__top, html.watch-settings-page .watch-settings__tabs, html.watch-settings-page .watch-settings__tab, html.watch-settings-page .watch-settings__section, html.watch-settings-page .watch-settings__input, html.watch-settings-page .watch-settings__textarea, html.watch-settings-page .watch-settings__note, html.watch-settings-page .watch-settings__sysinfo, html.watch-settings-page .watch-settings__card{ border-color: transparent !important; } html.watch-settings-page .watch-settings__top, html.watch-settings-page .watch-settings__tabs, html.watch-settings-page .watch-settings__section{ box-shadow:none !important; } html.watch-settings-page .watch-settings__tabs{ border-right:0 !important; } @media (max-width:860px){ html.watch-settings-page .watch-settings__tabs{border-bottom:0 !important;} } .watch-loadmore-btn{display:none !important;} /* === v102 light search loading + title arrow micro-align === */ html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem{ background: rgba(17,24,39,.035) !important; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine{ background: rgba(17,24,39,.10) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after{ background: linear-gradient(100deg, rgba(255,255,255,0) 0 26%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 74% 100%) !important; opacity: .95 !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__hint{ background: rgba(17,24,39,.03) !important; border-color: rgba(15,23,42,.08) !important; } /* ===== search loading note ===== */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__loadingNote{ display:none !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem{ background:rgba(15,23,42,.08) !important; border:1px solid rgba(15,23,42,.08) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine{ background:rgba(15,23,42,.18) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after{ background:linear-gradient(100deg, rgba(255,255,255,0) 0 24%, rgba(255,255,255,.98) 50%, rgba(255,255,255,0) 76% 100%) !important; } /* === v106 search skeleton visibility + profile click restore === */ #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__loadingNote, #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__loadingText{ display:none !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonItem{ background:rgba(15,23,42,.065) !important; border:1px solid rgba(15,23,42,.10) !important; box-shadow:none !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine{ background:rgba(15,23,42,.16) !important; } html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, html[data-watch-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, html[data-theme="light"] #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, body.theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonThumb::after, .theme-light #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__skeletonLine::after{ background:linear-gradient(100deg, rgba(255,255,255,0) 0 28%, rgba(255,255,255,.82) 52%, rgba(255,255,255,0) 76% 100%) !important; opacity:1 !important; } .watch-profile.watch-profile--svg > .watch-profile__card{ min-height:auto !important; } .watch-profile.watch-profile--svg .watch-profile__head{ display:flex !important; visibility:visible !important; opacity:1 !important; } .watch-profile.watch-profile--svg .watch-profile__meta, .watch-profile.watch-profile--svg .watch-profile__name, .watch-profile.watch-profile--svg .watch-profile__aboutLine, .watch-profile.watch-profile--svg .watch-profileR__statLabel, .watch-profile.watch-profile--svg .watch-profileR__statValue, .watch-profile.watch-profile--svg .watch-profileR__statChevron{ opacity:1 !important; } .watch-profile.watch-profile--svg .watch-profile__presenceLine{ display:none !important; } .watch-profile.watch-profile--svg .watch-profile__avatarPresence{ right:8px !important; bottom:8px !important; } .watch-profile.watch-profile--svg .watch-profileR__stats, .watch-profile.watch-profile--svg .watch-profileR__stat{ position:relative !important; z-index:30 !important; pointer-events:auto !important; } .watch-profile.watch-profile--svg .watch-profileR__body{ display:none !important; } html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profile__card, html[data-watch-theme="dark"] .watch-profile.watch-profile--svg .watch-profile__card{ background:#101114 !important; } html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profile__head, html[data-watch-theme="dark"] .watch-profile.watch-profile--svg .watch-profile__head{ background:#141519 !important; } html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profile__name, html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profile__aboutLine, html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profileR__statLabel, html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profileR__statValue, html:not([data-watch-theme="light"]) .watch-profile.watch-profile--svg .watch-profileR__statChevron{ color:#f5f7fb !important; } /* Home hover preview */ .mcard__previewMeta{ display:none !important; } .watch-home .mcard__link{ cursor:pointer; } .watch-cardpreview{ position:fixed; z-index:140; width:min(380px, calc(100vw - 24px)); border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(10,14,20,.98); color:#fff; box-shadow:0 30px 70px rgba(0,0,0,.45); opacity:0; pointer-events:none; transform:translateY(14px) scale(.965); transition:opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1); } .watch-cardpreview.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); } .watch-cardpreview__close{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; border:0; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.44); color:#fff; cursor:pointer; transition:transform .18s ease, background .18s ease; } .watch-cardpreview__close:hover{ transform:scale(1.05); background:rgba(0,0,0,.62); } .watch-cardpreview__close .watch-mi{ font-size:20px; } .watch-cardpreview__media{ position:relative; aspect-ratio:16 / 9; background:#090c12; overflow:hidden; } .watch-cardpreview__media::after{ content:""; position:absolute; inset:auto 0 0; height:52%; background:linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.72) 62%, rgba(10,14,20,.92) 100%); pointer-events:none; } .watch-cardpreview__media iframe, .watch-cardpreview__media video, .watch-cardpreview__media img{ display:block; width:100%; height:100%; border:0; } .watch-cardpreview__media video, .watch-cardpreview__media img{ object-fit:cover; } .watch-cardpreview__body{ display:grid; gap:12px; padding:16px 16px 18px; } .watch-cardpreview__actions{ display:flex; gap:10px; flex-wrap:wrap; } .watch-cardpreview__btn{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-size:13px; font-weight:800; transition:transform .18s ease, background .18s ease, border-color .18s ease; } .watch-cardpreview__btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); } .watch-cardpreview__btn .watch-mi{ font-size:18px; } .watch-cardpreview__btn--play{ background:#fff; color:#111; border:0; } .watch-cardpreview__btn--play .watch-mi{ font-size:27px; line-height:1; background:transparent; box-shadow:none; } .watch-cardpreview__btn--play:hover{ background:#fff; } .watch-cardpreview__titleWrap{ display:grid; gap:4px; } .watch-cardpreview__title{ font-size:24px; line-height:1.08; font-weight:900; letter-spacing:-.03em; color:#fff; } .watch-cardpreview__subtitle{ font-size:12px; line-height:1.4; color:rgba(255,255,255,.62); } .watch-cardpreview__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .watch-cardpreview__badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .watch-cardpreview__badges .mcard__badge{ position:static; top:auto; left:auto; margin:0; box-shadow:none; } .watch-cardpreview__metaItem{ display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.82); font-size:12px; font-weight:700; } .watch-cardpreview__genres{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.74); display:flex; flex-wrap:wrap; gap:5px; } .watch-cardpreview__genreLink{ color:rgba(255,255,255,.74); text-decoration:none; transition:color .14s ease, text-decoration .14s ease; } .watch-cardpreview__genreLink:hover{ color:#fff; text-decoration:underline; } html[data-watch-theme="light"] .watch-cardpreview__genreLink{ color:rgba(0,0,0,.68); } html[data-watch-theme="light"] .watch-cardpreview__genreLink:hover{ color:rgba(0,0,0,.92); } .watch-cardpreview__desc{ font-size:13px; line-height:1.55; color:rgba(255,255,255,.88); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .watch-home .mcard.is-preview-open{ z-index:18; } html[data-watch-theme="light"] .watch-cardpreview{ background:rgba(255,255,255,.985); color:#111; border-color:rgba(17,20,28,.08); box-shadow:0 24px 56px rgba(16,22,34,.18); } html[data-watch-theme="light"] .watch-cardpreview__close{ background:rgba(255,255,255,.82); color:#111; } html[data-watch-theme="light"] .watch-cardpreview__close:hover{ background:#fff; } html[data-watch-theme="light"] .watch-cardpreview__media::after{ background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.66) 62%, rgba(255,255,255,.92) 100%); } html[data-watch-theme="light"] .watch-cardpreview__btn{ background:rgba(17,20,28,.05); border-color:rgba(17,20,28,.10); color:#111; } html[data-watch-theme="light"] .watch-cardpreview__btn:hover{ background:rgba(17,20,28,.08); border-color:rgba(17,20,28,.16); } html[data-watch-theme="light"] .watch-cardpreview__btn--play{ background:#111; color:#fff; border:0; } html[data-watch-theme="light"] .watch-cardpreview__btn--play:hover{ background:#111; } html[data-watch-theme="light"] .watch-cardpreview__title{ color:#111; } html[data-watch-theme="light"] .watch-cardpreview__subtitle{ color:rgba(17,20,28,.52); } html[data-watch-theme="light"] .watch-cardpreview__metaItem{ background:rgba(17,20,28,.06); color:rgba(17,20,28,.72); } html[data-watch-theme="light"] .watch-cardpreview__genres{ color:rgba(17,20,28,.62); } html[data-watch-theme="light"] .watch-cardpreview__desc{ color:rgba(17,20,28,.84); } @media (max-width:900px){ .watch-cardpreview{ display:none !important; } } /* Home inline expando preview */ .watch-home .watch-block.has-inlinepreview{ position:relative; } .watch-home .mcard.is-inlinepreview-open{ z-index:22; } .watch-inlinepreviewHost{ margin-top:4px; margin-left:-18px; width:calc(100% + 36px); height:0; opacity:0; overflow:hidden; pointer-events:none; will-change:height, opacity, transform; contain:layout paint; transform:translateY(-8px); transition: height .48s cubic-bezier(.22,1,.36,1), opacity .34s ease, transform .48s cubic-bezier(.22,1,.36,1); } .watch-inlinepreviewHost.is-open{ opacity:1; transform:translateY(0); overflow:visible; pointer-events:auto; } .watch-inlinepreview{ --watch-inlinepreview-pointer-left:72px; position:relative; display:block; width:100%; min-height:clamp(500px, 40vw, 680px); border-radius:0; border:0; background:#000; color:#fff; overflow:visible; box-shadow:none; transform-origin:top center; } .watch-inlinepreview::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.996) 24%, rgba(0,0,0,.982) 40%, rgba(0,0,0,.93) 52%, rgba(0,0,0,.82) 61%, rgba(0,0,0,.62) 69%, rgba(0,0,0,.34) 79%, rgba(0,0,0,.08) 89%, rgba(0,0,0,0) 96%), radial-gradient(ellipse at 28% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.1) 46%, rgba(0,0,0,0) 64%), linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.44) 24%, rgba(0,0,0,.08) 52%, rgba(0,0,0,0) 78%); } .watch-inlinepreview__pointer{ display:none; } .watch-inlinepreview__close{ position:absolute; top:18px; right:20px; z-index:5; width:auto; height:auto; border:0; border-radius:0; display:flex; align-items:center; justify-content:center; background:transparent; color:#fff; cursor:pointer; transition:transform .18s ease, opacity .18s ease; opacity:.92; } .watch-inlinepreview__close:hover{ transform:scale(1.05); opacity:1; } .watch-inlinepreview__close .watch-mi{ font-size:32px; } .watch-inlinepreview__media{ position:absolute; inset:0; background:#000; overflow:hidden; pointer-events:none; opacity:0; transform:scale(1.018); transition:opacity .42s ease, transform .82s cubic-bezier(.22,1,.36,1); } .watch-inlinepreviewHost.is-open .watch-inlinepreview__media{ opacity:1; transform:none; } .watch-inlinepreview__media::after{ content:none; } .watch-inlinepreview__media iframe, .watch-inlinepreview__media video, .watch-inlinepreview__media img{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; } .watch-inlinepreview__media video, .watch-inlinepreview__media img{ object-fit:cover; } .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterBackdrop{ opacity:.84; filter:blur(24px) brightness(.38) saturate(.92); transform:scale(1.24); object-position:72% center; } .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterArtwork{ inset:auto; left:auto; right:-6%; bottom:0; top:auto; transform:none; width:clamp(720px, 62vw, 1280px); height:100%; max-width:none; max-height:none; object-fit:cover; object-position:40% top; filter:brightness(.96); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 11%, rgba(0,0,0,1) 16%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 11%, rgba(0,0,0,1) 16%); background:transparent; } .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterFallback{ inset:auto; left:auto; right:-8%; bottom:0; top:auto; transform:none; width:clamp(700px, 60vw, 1160px); height:100%; max-height:none; object-fit:cover; object-position:38% top; opacity:.96; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 11%, rgba(0,0,0,1) 16%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 11%, rgba(0,0,0,1) 16%); background:transparent; } .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterMain{ inset:auto; left:auto; right:-6%; top:auto; bottom:0; width:clamp(720px, 62vw, 1280px); height:100%; max-width:none; max-height:none; object-fit:cover; object-position:40% top; filter:brightness(.96); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 11%, rgba(0,0,0,1) 16%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 11%, rgba(0,0,0,1) 16%); background:transparent; } .watch-inlinepreview__body{ position:relative; z-index:3; display:flex; flex-direction:column; justify-content:flex-start; gap:16px; width:min(620px, 44%); min-height:clamp(500px, 40vw, 680px); padding:124px 0 42px 48px; } .watch-inlinepreview__body > *{ opacity:0; transform:translateY(18px); transition:opacity .38s ease, transform .56s cubic-bezier(.22,1,.36,1); } .watch-inlinepreviewHost.is-open .watch-inlinepreview__body > *{ opacity:1; transform:none; } .watch-inlinepreviewHost.is-open .watch-inlinepreview__titleWrap{ transition-delay:.08s; } .watch-inlinepreviewHost.is-open .watch-inlinepreview__meta{ transition-delay:.14s; } .watch-inlinepreviewHost.is-open .watch-inlinepreview__genres{ transition-delay:.2s; } .watch-inlinepreviewHost.is-open .watch-inlinepreview__desc{ transition-delay:.26s; } .watch-inlinepreviewHost.is-open .watch-inlinepreview__actions{ transition-delay:.32s; } .watch-inlinepreview__actions{ display:flex; gap:10px; flex-wrap:wrap; order:5; margin-top:auto; align-items:flex-start; position:relative; z-index:24; } .watch-inlinepreview__btn{ display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-size:14px; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,0); transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease; } .watch-inlinepreview__btn, .watch-inlinepreview__btn:visited, .watch-inlinepreview__btn:hover, .watch-inlinepreview__btn:focus, .watch-inlinepreview__btn:active, .watch-inlinepreview__btn span{ text-decoration:none !important; } .watch-inlinepreview__btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); box-shadow:0 14px 32px rgba(0,0,0,.24); } .watch-inlinepreview__btn:focus-visible{ outline:none; transform:translateY(-1px); border-color:rgba(255,255,255,.34); box-shadow:0 0 0 3px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.22); } .watch-inlinepreview__btn .watch-mi{ font-size:18px; } .watch-inlinepreview__btn--play{ background:#fff; color:#111; border:0; } .watch-inlinepreview__btn--play .watch-mi{ width:auto; height:auto; display:inline-block; font-size:27px; line-height:1; border-radius:0; background:transparent; box-shadow:none; } .watch-inlinepreview__btn--play:hover{ background:#fff; color:#111; box-shadow:0 16px 34px rgba(255,255,255,.12); } .watch-inlinepreview__titleWrap{ display:grid; gap:6px; order:1; } .watch-inlinepreview__title{ font-size:clamp(34px, 3.3vw, 52px); line-height:1.02; font-weight:900; letter-spacing:-.04em; color:#fff; } .watch-inlinepreview__subtitle{ font-size:15px; line-height:1.4; color:rgba(255,255,255,.76); } .watch-inlinepreview__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; order:2; } .watch-inlinepreview__rating{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#9dd6b6; color:#0b0f12; font-size:13px; font-weight:900; } .watch-inlinepreview__metaText{ color:rgba(255,255,255,.86); font-size:13px; font-weight:500; } .watch-inlinepreview__metaLink{ color:inherit; text-decoration:none !important; border-bottom:0 !important; box-shadow:none !important; transition:color .14s ease; } .watch-inlinepreview__metaLink:hover{ color:#fff; text-decoration:none !important; border-bottom:0 !important; } .watch-inlinepreview__metaLink:focus-visible{ outline:none; text-decoration:none !important; border-bottom:0 !important; } .watch-inlinepreview__metaLink:visited, .watch-inlinepreview__metaLink:active, .watch-inlinepreview__metaLink:focus{ text-decoration:none !important; border-bottom:0 !important; } .watch-inlinepreview__sep{ color:rgba(255,255,255,.28); font-size:13px; font-weight:500; } .watch-inlinepreview__genres{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.74); order:3; display:flex; flex-wrap:wrap; gap:6px; } .watch-inlinepreview__genreLink{ color:rgba(255,255,255,.74); text-decoration:none; transition:color .14s ease, text-decoration .14s ease; } .watch-inlinepreview__genreLink:hover{ color:#fff; text-decoration:underline; } html[data-watch-theme="light"] .watch-inlinepreview__genreLink{ color:rgba(0,0,0,.68); } html[data-watch-theme="light"] .watch-inlinepreview__genreLink:hover{ color:rgba(0,0,0,.92); } .watch-inlinepreview__desc{ max-width:540px; font-size:15px; line-height:1.58; color:rgba(255,255,255,.88); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; order:4; } html[data-watch-theme="light"] .watch-inlinepreview{ background:#000; color:#fff; } html[data-watch-theme="light"] .watch-inlinepreview__close{ background:transparent; color:#fff; } html[data-watch-theme="light"] .watch-inlinepreview__close:hover{ background:transparent; } html[data-watch-theme="light"] .watch-inlinepreview__media::after{ content:none; } html[data-watch-theme="light"] .watch-inlinepreview__btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#fff; } html[data-watch-theme="light"] .watch-inlinepreview__btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); } html[data-watch-theme="light"] .watch-inlinepreview__btn--play{ background:#fff; color:#111; border-color:rgba(255,255,255,.92); } html[data-watch-theme="light"] .watch-inlinepreview__btn--play:hover{ background:#fff; } html[data-watch-theme="light"] .watch-inlinepreview__title{ color:#fff; } html[data-watch-theme="light"] .watch-inlinepreview__subtitle{ color:rgba(255,255,255,.62); } html[data-watch-theme="light"] .watch-inlinepreview__rating{ background:#9dd6b6; color:#0b0f12; } html[data-watch-theme="light"] .watch-inlinepreview__metaText{ color:rgba(255,255,255,.86); } html[data-watch-theme="light"] .watch-inlinepreview__sep{ color:rgba(255,255,255,.28); } html[data-watch-theme="light"] .watch-inlinepreview__genres{ color:rgba(255,255,255,.74); } html[data-watch-theme="light"] .watch-inlinepreview__desc{ color:rgba(255,255,255,.88); } .watch-inlinepreview__actions .mcard__bm{ position:relative; top:auto; right:auto; z-index:80; opacity:1; transform:none; display:inline-flex; flex:0 0 auto; overflow:visible; } .watch-inlinepreview__actions .mcard__bmBtn{ width:40px; height:40px; border-radius:999px; } .watch-inlinepreview__actions .mcard__bmMenu{ top:auto; bottom:calc(100% + 12px); right:-8px; z-index:140; transform-origin:bottom right; } @media (max-width:1100px){ .watch-inlinepreview{ min-height:520px; } .watch-inlinepreview__title{ font-size:40px; } .watch-inlinepreview__body{ width:min(560px, 52%); min-height:520px; padding:120px 0 40px 40px; } .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterArtwork{ right:-7%; width:clamp(560px, 66vw, 980px); } .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterFallback{ right:-8%; width:clamp(520px, 62vw, 920px); } } @media (max-width:900px){ .watch-inlinepreviewHost{ display:none !important; } } /* Full black site background without grey rounded page panel */ html, body, .watch-layout, .watch-content, .watch-page{ background:#000 !important; background-color:#000 !important; } .watch-content{ padding-left:16px !important; padding-right:16px !important; } .watch-page{ margin:0 !important; padding:18px 0 0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; min-height:calc(100vh - var(--watch-topbar-h, 72px)) !important; } html[data-watch-theme="light"], html[data-watch-theme="light"] body, html[data-watch-theme="light"] .watch-layout, html[data-watch-theme="light"] .watch-content, html[data-watch-theme="light"] .watch-page{ background:var(--w-bg) !important; background-color:var(--w-bg) !important; } /* Final category title alignment + hover response */ .watch-home .watch-block__head{ min-height:auto !important; margin-bottom:8px !important; padding-left:5px !important; } .watch-home .watch-block__title{ display:flex !important; align-items:center !important; justify-content:flex-start !important; margin:0 !important; line-height:1 !important; } .watch-home .watch-block__titleLink{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:4px !important; line-height:1 !important; color:rgba(255,255,255,.96) !important; text-decoration:none !important; text-shadow:none !important; transform:none !important; transition:color .22s ease, opacity .22s ease, text-shadow .22s ease !important; } .watch-home .watch-block__titleLink:visited{ color:rgba(255,255,255,.96) !important; } /* ===== category title link hover (kept) ===== */ .watch-home .watch-block__titleLink:hover, .watch-home .watch-block__titleLink:focus-visible{ color:#fff !important; text-shadow:0 0 14px rgba(255,255,255,.14) !important; outline:none !important; } .watch-home .watch-block__titleLink:hover .watch-block__titleArrow, .watch-home .watch-block__titleLink:focus-visible .watch-block__titleArrow{ color:#fff !important; opacity:1 !important; } html[data-watch-theme="light"] .watch-home .watch-block__titleLink, html[data-watch-theme="light"] .watch-home .watch-block__titleLink:visited{ color:rgba(18,18,18,.96) !important; } html[data-watch-theme="light"] .watch-home .watch-block__titleLink:hover, html[data-watch-theme="light"] .watch-home .watch-block__titleLink:focus-visible{ color:rgba(0,0,0,.96) !important; text-shadow:0 0 12px rgba(0,0,0,.06) !important; } html[data-watch-theme="light"] .watch-home .watch-block__titleLink:hover .watch-block__titleArrow, html[data-watch-theme="light"] .watch-home .watch-block__titleLink:focus-visible .watch-block__titleArrow{ color:rgba(26,26,26,.96) !important; } /* Light theme: inline home preview */ html[data-watch-theme="light"] .watch-inlinepreview{ background:#f6f7fa !important; color:#141820 !important; } html[data-watch-theme="light"] .watch-inlinepreview::before{ background: linear-gradient(90deg, rgba(246,247,250,.995) 0%, rgba(246,247,250,.985) 26%, rgba(246,247,250,.95) 42%, rgba(246,247,250,.82) 54%, rgba(246,247,250,.48) 68%, rgba(246,247,250,.14) 82%, rgba(246,247,250,0) 94%), radial-gradient(ellipse at 28% 50%, rgba(246,247,250,.38) 0%, rgba(246,247,250,.22) 28%, rgba(246,247,250,.08) 48%, rgba(246,247,250,0) 66%), linear-gradient(0deg, rgba(246,247,250,.9) 0%, rgba(246,247,250,.5) 24%, rgba(246,247,250,.12) 52%, rgba(246,247,250,0) 78%) !important; } html[data-watch-theme="light"] .watch-inlinepreview__media{ background:#eef1f5 !important; } html[data-watch-theme="light"] .watch-inlinepreview__media.is-poster .watch-inlinepreview__posterBackdrop{ opacity:.58 !important; filter:blur(24px) brightness(.92) saturate(.92) !important; } html[data-watch-theme="light"] .watch-inlinepreview__close{ color:#141820 !important; } html[data-watch-theme="light"] .watch-inlinepreview__btn{ background:rgba(20,24,32,.05) !important; border-color:rgba(20,24,32,.10) !important; color:rgba(20,24,32,.92) !important; } html[data-watch-theme="light"] .watch-inlinepreview__btn:hover{ background:rgba(20,24,32,.08) !important; border-color:rgba(20,24,32,.16) !important; box-shadow:0 14px 30px rgba(15,23,42,.10) !important; } html[data-watch-theme="light"] .watch-inlinepreview__btn--play{ background:#151922 !important; color:#fff !important; border:0 !important; } html[data-watch-theme="light"] .watch-inlinepreview__btn--play:hover{ background:#0f131b !important; color:#fff !important; } html[data-watch-theme="light"] .watch-inlinepreview__title{ color:#141820 !important; } html[data-watch-theme="light"] .watch-inlinepreview__subtitle{ color:rgba(20,24,32,.66) !important; } html[data-watch-theme="light"] .watch-inlinepreview__rating{ background:#9dd6b6 !important; color:#0b0f12 !important; } html[data-watch-theme="light"] .watch-inlinepreview__metaText{ color:rgba(20,24,32,.82) !important; } html[data-watch-theme="light"] .watch-inlinepreview__metaLink:hover{ color:rgba(20,24,32,.98) !important; } html[data-watch-theme="light"] .watch-inlinepreview__sep{ color:rgba(20,24,32,.24) !important; } html[data-watch-theme="light"] .watch-inlinepreview__genres{ color:rgba(20,24,32,.70) !important; } html[data-watch-theme="light"] .watch-inlinepreview__desc{ color:rgba(20,24,32,.84) !important; } html[data-watch-theme="light"] .mcard__bmBtn{ border-color:rgba(255,255,255,.30) !important; background:rgba(0,0,0,.52) !important; color:#fff !important; box-shadow:0 8px 20px rgba(0,0,0,.22) !important; } html[data-watch-theme="light"] .mcard__bmBtn:hover{ background:rgba(0,0,0,.68) !important; border-color:rgba(255,255,255,.42) !important; box-shadow:0 8px 20px rgba(0,0,0,.24) !important; } html[data-watch-theme="light"] .mcard__bmMenu{ border:1px solid rgba(20,24,32,.08) !important; background:rgba(255,255,255,.98) !important; box-shadow:0 16px 38px rgba(15,23,42,.12) !important; } html[data-watch-theme="light"] .mcard__bmItem{ color:rgba(20,24,32,.88) !important; } html[data-watch-theme="light"] .mcard__bmItem:hover{ background:rgba(20,24,32,.05) !important; } /* Light theme: profile pages without touching userinfo.tpl */ html[data-watch-theme="light"] .watch-profile__card, html[data-watch-theme="light"] .watch-profile.watch-profile--svg > .watch-profile__card{ background:rgba(255,255,255,.94) !important; border-color:rgba(20,24,32,.08) !important; box-shadow:0 18px 46px rgba(15,23,42,.08) !important; } html[data-watch-theme="light"] .watch-profile__cover{ background:rgba(20,24,32,.06) !important; } html[data-watch-theme="light"] .watch-profile__head, html[data-watch-theme="light"] .watch-profile.watch-profile--svg .watch-profile__head{ background:transparent !important; } html[data-watch-theme="light"] .watch-profile__avatar{ background:#fff !important; box-shadow:0 12px 30px rgba(15,23,42,.10) !important; } html[data-watch-theme="light"] .watch-profile__name, html[data-watch-theme="light"] .watch-profile__aboutLine, html[data-watch-theme="light"] .watch-profileR__statLabel, html[data-watch-theme="light"] .watch-profileR__statValue, html[data-watch-theme="light"] .watch-profileR__statChevron{ color:#151922 !important; } html[data-watch-theme="light"] .watch-profile__sub{ color:rgba(20,24,32,.68) !important; } html[data-watch-theme="light"] .watch-profile__section{ background:rgba(255,255,255,.86) !important; border-color:rgba(20,24,32,.08) !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; } html[data-watch-theme="light"] .watch-userprofile{ color:#151922 !important; } html[data-watch-theme="light"] .watch-userprofile__card{ background:#ffffff !important; border:1px solid rgba(20,24,32,.08) !important; box-shadow:0 18px 46px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important; } html[data-watch-theme="light"] .watch-userprofile__card::after{ box-shadow:inset 0 0 0 1px rgba(20,24,32,.03) !important; } html[data-watch-theme="light"] .watch-userprofile__cover{ background:#e9edf2 !important; } html[data-watch-theme="light"] .watch-userprofile__cover::after{ background:rgba(20,24,32,.08) !important; } html[data-watch-theme="light"] .watch-userprofile__menuBtn{ background:rgba(20,24,32,.05) !important; } html[data-watch-theme="light"] .watch-userprofile__menuBtn:hover{ background:rgba(20,24,32,.09) !important; } html[data-watch-theme="light"] .watch-userprofile__menuBtn[aria-expanded="true"]{ background:rgba(20,24,32,.12) !important; } html[data-watch-theme="light"] .watch-userprofile__menuBtnDot{ background:rgba(20,24,32,.72) !important; } html[data-watch-theme="light"] .watch-userprofile__menuPanel{ border-color:rgba(20,24,32,.08) !important; background:rgba(255,255,255,.98) !important; box-shadow:0 16px 38px rgba(15,23,42,.12) !important; } html[data-watch-theme="light"] .watch-userprofile__menuItem{ color:rgba(20,24,32,.86) !important; } html[data-watch-theme="light"] .watch-userprofile__menuItem + .watch-userprofile__menuItem{ border-top-color:rgba(20,24,32,.06) !important; } html[data-watch-theme="light"] .watch-userprofile__menuItem:hover{ background:rgba(20,24,32,.05) !important; } html[data-watch-theme="light"] .watch-userprofile__modal{ border-color:rgba(20,24,32,.10) !important; background:rgba(255,255,255,.98) !important; box-shadow:0 24px 60px rgba(15,23,42,.16) !important; color:#151922 !important; } html[data-watch-theme="light"] .watch-userprofile__modalText{ color:rgba(20,24,32,.78) !important; } html[data-watch-theme="light"] .watch-userprofile__modalInput{ border-color:rgba(20,24,32,.12) !important; background:rgba(20,24,32,.04) !important; color:#151922 !important; } html[data-watch-theme="light"] .watch-userprofile__modalBtn.is-cancel{ background:rgba(20,24,32,.08) !important; color:#151922 !important; } html[data-watch-theme="light"] .watch-userprofile__body{ background:#ffffff !important; } html[data-watch-theme="light"] .watch-userprofile__avatarWrap::before{ border-color:#ffffff !important; } html[data-watch-theme="light"] .watch-userprofile__avatar{ background:#eef1f5 center/cover no-repeat !important; } html[data-watch-theme="light"] .watch-userprofile__presence{ box-shadow:0 0 0 6px #ffffff !important; } html[data-watch-theme="light"] .watch-userprofile__name{ color:#151922 !important; -webkit-text-fill-color:#151922 !important; text-shadow:none !important; } html[data-watch-theme="light"] .watch-userprofile__btn{ background:rgba(20,24,32,.06) !important; color:rgba(20,24,32,.76) !important; } html[data-watch-theme="light"] .watch-userprofile__btn:hover{ background:rgba(20,24,32,.10) !important; color:#151922 !important; } html[data-watch-theme="light"] .watch-userprofile__btn.is-accent{ background:#151922 !important; color:#fff !important; } html[data-watch-theme="light"] .watch-userprofile__about{ color:rgba(20,24,32,.68) !important; } html[data-watch-theme="light"] .watch-userprofile__comments, html[data-watch-theme="light"] .watch-userprofile__sideCard{ border-color:rgba(20,24,32,.07) !important; background:#f7f8fb !important; } html[data-watch-theme="light"] .watch-userprofile__commentsTitle, html[data-watch-theme="light"] .watch-userprofile__sideLabel, html[data-watch-theme="light"] .watch-userprofile__sideValue, html[data-watch-theme="light"] .watch-userprofile__friendName{ color:#151922 !important; } html[data-watch-theme="light"] .watch-userprofile__composerInput{ background:rgba(20,24,32,.05) !important; color:rgba(20,24,32,.34) !important; } html[data-watch-theme="light"] .watch-userprofile__sideRow + .watch-userprofile__sideRow{ border-top-color:rgba(20,24,32,.06) !important; } html[data-watch-theme="light"] .watch-userprofile__sideChevron, html[data-watch-theme="light"] .watch-userprofile__friendSub, html[data-watch-theme="light"] .watch-userprofile__friendEmpty{ color:rgba(20,24,32,.42) !important; } html[data-watch-theme="light"] .watch-userprofile__friendAvatar, html[data-watch-theme="light"] .watch-userprofile__composerAvatar{ background:#e9edf2 center/cover no-repeat !important; } /* Settings: borderless everywhere (modal + /settings page) */ .watch-settingsmodal .watch-settings__card, .watch-settingsmodal .watch-settings__top, .watch-settingsmodal .watch-settings__tabs, .watch-settingsmodal .watch-settings__tab, .watch-settingsmodal .watch-settings__section, .watch-settingsmodal .watch-settings__input, .watch-settingsmodal .watch-settings__textarea, .watch-settingsmodal .watch-settings__avatar, .watch-settingsmodal .watch-settings__mediaBtn, .watch-settingsmodal .watch-settings__note, .watch-settingsmodal .watch-switch__ui, .watch-settingsmodal .watch-btn, .watch-settingsmodal .watch-btn--ghost, .watch-settingsmodal .watch-btn--primary, .watch-settingsmodal .watch-btn--danger, .watch-settingsmodal .watch-settings__sysinfo, .watch-settingsmodal .watch-settings__row, .watch-settingsmodal .watch-settings__row--switch{ border:0 !important; box-shadow:none !important; } html.watch-settings-page .watch-settings__card, html.watch-settings-page .watch-settings__top, html.watch-settings-page .watch-settings__tabs, html.watch-settings-page .watch-settings__tab, html.watch-settings-page .watch-settings__section, html.watch-settings-page .watch-settings__input, html.watch-settings-page .watch-settings__textarea, html.watch-settings-page .watch-settings__avatar, html.watch-settings-page .watch-settings__mediaBtn, html.watch-settings-page .watch-settings__note, html.watch-settings-page .watch-switch__ui, html.watch-settings-page .watch-btn, html.watch-settings-page .watch-btn--ghost, html.watch-settings-page .watch-btn--primary, html.watch-settings-page .watch-btn--danger, html.watch-settings-page .watch-settings__sysinfo, html.watch-settings-page .watch-settings__row, html.watch-settings-page .watch-settings__row--switch{ border:0 !important; box-shadow:none !important; } /* Home rails: enforce equal left/right edge spacing */ @media (min-width: 1024px){ .watch-home .rail-wrap{ box-sizing: border-box !important; padding-left: 2px !important; padding-right: 2px !important; } .watch-home .rail{ padding-left: 0 !important; padding-right: 0 !important; } } /* --- PageSpeed safe optimizations (2026-03-31) --- */ .mcard__overlayDesc, .watch-home .mcard__overlayDesc, .watch-libv2 .mcard__overlayDesc, .watch-catgrid .mcard__overlayDesc{ font-weight: 300 !important; } /* Category page: same poster sizing feel as home (220 / 190 / 165), but wrapped grid */ .watch-catpage{ --watch-cat-card-min: 220px; } .watch-catgrid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--watch-cat-card-min), 1fr)) !important; gap:14px !important; align-items:start !important; } .watch-catgrid .mcard{ flex:none !important; width:100% !important; max-width:none !important; } .watch-catgrid .mcard__img{ width:100% !important; } .watch-catgrid .mcard__img img{ width:100% !important; height:auto !important; aspect-ratio: 2 / 3; object-fit:cover !important; content-visibility:auto; contain-intrinsic-size: 660px; } .watch-home .mcard__img img, .watch-libv2 .mcard__img img, .watch-catgrid .mcard__img img{ aspect-ratio: 2 / 3; } @media (max-width: 980px){ .watch-catpage{ --watch-cat-card-min: 190px; } } @media (max-width: 640px){ .watch-catpage{ --watch-cat-card-min: 165px; } } /* ===== Modern Comments UI ===== */ .watch-comments{ margin-top:32px !important; } .watch-comments .box{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .watch-comments .box > .heading{ display:none !important; } /* Comment card */ .watch-comment__card{ display:grid; grid-template-columns:52px minmax(0, 1fr); gap:14px; padding:16px 18px; border-radius:16px; border:1px solid rgba(var(--w-ink-rgb),.06); background:rgba(var(--w-ink-rgb),.02); margin-bottom:10px; transition:border-color .18s ease, background .18s ease; } .watch-comment__card:hover{ border-color:rgba(var(--w-ink-rgb),.10); background:rgba(var(--w-ink-rgb),.03); } .watch-comment__avatarCol{ position:relative; display:flex; flex-direction:column; align-items:center; } .watch-comment__avatar{ display:block; width:52px; height:52px; border-radius:999px; overflow:hidden; background:rgba(var(--w-ink-rgb),.06); } .watch-comment__avatar img{ display:block; width:100%; height:100%; object-fit:cover; } .watch-comment__avatar--guest{ display:flex; align-items:center; justify-content:center; } .watch-comment__avatar--guest .watch-mi{ font-size:24px; color:rgba(var(--w-ink-rgb),.30); } .watch-comment__online{ position:absolute; right:-2px; bottom:0; width:12px; height:12px; border-radius:999px; background:#46d76c; border:2px solid rgba(var(--w-bg-rgb),1); } .watch-comment__body{ min-width:0; } .watch-comment__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .watch-comment__authorRow{ display:flex; align-items:center; gap:8px; min-width:0; } .watch-comment__author{ font-size:14px; font-weight:700; color:rgba(var(--w-ink-rgb),.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .watch-comment__onlineBadge{ display:inline-block; padding:1px 7px; border-radius:999px; background:rgba(70,215,108,.12); color:#46d76c; font-size:11px; font-weight:700; letter-spacing:.2px; white-space:nowrap; } .watch-comment__date{ font-size:12px; color:rgba(var(--w-ink-rgb),.42); white-space:nowrap; flex-shrink:0; } .watch-comment__newsLink{ display:inline-block; margin-bottom:8px; padding:3px 10px; border-radius:8px; background:rgba(var(--w-accent),.08); color:var(--w-accent); font-size:12px; font-weight:600; text-decoration:none; } .watch-comment__newsLink:hover{ background:rgba(var(--w-accent),.14); text-decoration:none; } .watch-comment__text{ font-size:14px; line-height:1.6; color:rgba(var(--w-ink-rgb),.86); word-break:break-word; overflow-wrap:break-word; } .watch-comment__text .spoiler{ margin:10px 0; padding:10px 14px; border-radius:10px; border-left:3px solid rgba(var(--w-accent),.40); background:rgba(var(--w-accent),.04); } .watch-comment__text img{ max-width:100%; height:auto; border-radius:10px; } .watch-comment__signature{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(var(--w-ink-rgb),.06); font-size:12px; color:rgba(var(--w-ink-rgb),.38); font-style:italic; } .watch-comment__actions{ display:flex; align-items:center; gap:4px; margin-top:10px; flex-wrap:wrap; } .watch-comment__actionBtn{ appearance:none; border:0; background:transparent; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:8px; color:rgba(var(--w-ink-rgb),.55); font-size:12px; font-weight:600; cursor:pointer; transition:background .14s ease, color .14s ease; } .watch-comment__actionBtn .watch-mi{ font-size:15px; line-height:1; } .watch-comment__actionBtn:hover{ background:rgba(var(--w-ink-rgb),.06); color:rgba(var(--w-ink-rgb),.86); } .watch-comment__actionBtn--muted{ color:rgba(var(--w-ink-rgb),.38); } .watch-comment__actionBtn--muted:hover{ color:rgba(var(--w-ink-rgb),.70); } .watch-comment__actionBtn--danger{ color:rgba(255,100,100,.70); } .watch-comment__actionBtn--danger:hover{ background:rgba(255,100,100,.10); color:#ff6464; } .watch-comment__mass{ margin-left:auto; } /* Comment composer / add comment form */ .watch-addcomment__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .watch-addcomment__title{ margin:0; font-size:20px; font-weight:800; color:rgba(var(--w-ink-rgb),.92); } .watch-addcomment__count{ font-size:14px; color:rgba(var(--w-ink-rgb),.42); font-weight:500; } .watch-addcomment__form{ border-radius:16px; border:1px solid rgba(var(--w-ink-rgb),.06); background:rgba(var(--w-ink-rgb),.02); padding:16px 18px; } .watch-addcomment__composer{ display:grid; grid-template-columns:36px minmax(0, 1fr); gap:12px; align-items:start; } .watch-addcomment__composerAvatar{ width:36px; height:36px; border-radius:999px; background:#1a1a1f center/cover no-repeat; flex-shrink:0; } .watch-addcomment__composerInput{ min-height:60px; } .watch-addcomment__composerInput textarea, .watch-addcomment__composerInput .textarea{ width:100%; min-height:60px; max-height:200px; border-radius:12px; border:1px solid rgba(var(--w-ink-rgb),.08); background:rgba(var(--w-ink-rgb),.04); color:rgba(var(--w-ink-rgb),.92); padding:10px 14px; font-size:14px; line-height:1.5; resize:vertical; outline:none; transition:border-color .15s ease, box-shadow .15s ease; } .watch-addcomment__composerInput textarea:focus, .watch-addcomment__composerInput .textarea:focus{ border-color:rgba(var(--w-ink-rgb),.18); box-shadow:0 0 0 3px rgba(var(--w-ink-rgb),.06); } .watch-addcomment__composerInput textarea::placeholder{ color:rgba(var(--w-ink-rgb),.30); } .watch-addcomment__footer{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; } .watch-addcomment__spoiler{ margin:0; } .watch-addcomment__submit{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 18px; border-radius:999px; border:0; background:rgba(var(--w-ink-rgb),.92); color:rgba(var(--w-bg-rgb),1); font-size:14px; font-weight:700; cursor:pointer; transition:background .15s ease, transform .14s ease; } .watch-addcomment__submit:hover{ background:rgba(var(--w-ink-rgb),1); transform:translateY(-1px); } .watch-addcomment__submit .watch-mi{ font-size:16px; line-height:1; } /* Light theme comment overrides */ html[data-watch-theme="light"] .watch-comment__card{ border-color:rgba(0,0,0,.06); background:rgba(0,0,0,.01); } html[data-watch-theme="light"] .watch-comment__card:hover{ border-color:rgba(0,0,0,.10); background:#fff; } html[data-watch-theme="light"] .watch-comment__avatar{ background:rgba(0,0,0,.04); } html[data-watch-theme="light"] .watch-comment__onlineBadge{ background:rgba(70,215,108,.14); color:#2ba84a; } html[data-watch-theme="light"] .watch-comment__text .spoiler{ background:rgba(91,108,255,.04); border-left-color:rgba(91,108,255,.30); } html[data-watch-theme="light"] .watch-addcomment__form{ border-color:rgba(0,0,0,.06); background:#fafbfc; } html[data-watch-theme="light"] .watch-addcomment__composerInput textarea, html[data-watch-theme="light"] .watch-addcomment__composerInput .textarea{ border-color:rgba(0,0,0,.08); background:#fff; color:rgba(0,0,0,.92); } html[data-watch-theme="light"] .watch-addcomment__composerInput textarea:focus, html[data-watch-theme="light"] .watch-addcomment__composerInput .textarea:focus{ border-color:rgba(0,0,0,.16); box-shadow:0 0 0 3px rgba(0,0,0,.04); } html[data-watch-theme="light"] .watch-addcomment__submit{ background:#111; color:#fff; } html[data-watch-theme="light"] .watch-addcomment__submit:hover{ background:#000; } @media (max-width:640px){ .watch-comment__card{ grid-template-columns:36px minmax(0, 1fr); gap:10px; padding:12px 14px; } .watch-comment__avatar{ width:36px; height:36px; } .watch-comment__author{ font-size:13px; } .watch-comment__text{ font-size:13px; line-height:1.5; } .watch-addcomment__form{ padding:12px 14px; } .watch-addcomment__composer{ grid-template-columns:32px minmax(0, 1fr); gap:10px; } .watch-addcomment__composerAvatar{ width:32px; height:32px; } } /* ===== Comments: final strong overrides ===== */ /* Avatar bigger + online badge visible */ .watch-comment__avatarCol{ position:relative; display:flex; } .watch-comment__avatar{ width:48px !important; height:48px !important; border-radius:999px !important; overflow:hidden; background:rgba(var(--w-ink-rgb),.06); display:block; } .watch-comment__avatar img{ width:100% !important; height:100% !important; object-fit:cover; display:block; } .watch-comment__online{ position:absolute !important; right:-2px !important; bottom:0 !important; width:14px !important; height:14px !important; border-radius:999px !important; background:#46d76c !important; border:2px solid rgba(0,0,0,1) !important; display:block !important; z-index:5 !important; } /* Textarea: grey instead of blue */ .watch-addcomment .addcomment textarea, .watch-addcomment .addcomment #comment-editor textarea, .watch-addcomment .addcomment .ui-form textarea, #comment-editor textarea, .watch-addcomment #comment-editor textarea, #comment-editor .textarea, .watch-addcomment textarea, .watch-comments textarea, .watch-comments .addcomment textarea, .watch-addcomment__editorWrap textarea{ background:#232323 !important; color:rgba(255,255,255,.92) !important; border-color:rgba(255,255,255,.08) !important; border-radius:12px !important; } /* DLE editor container */ #comment-editor, .watch-addcomment__editorWrap{ background:transparent !important; } /* Composer avatar with online dot */ .watch-addcomment__composerAvatarWrap{ position:relative; flex-shrink:0; align-self:flex-start; } .watch-addcomment__composerAvatar{ width:48px !important; height:48px !important; border-radius:999px !important; background:#1a1a22 center/cover no-repeat; display:block; } .watch-addcomment__composerOnline{ position:absolute; right:-3px; bottom:-1px; width:14px; height:14px; border-radius:999px; background:#46d76c; border:2px solid rgba(0,0,0,1); z-index:5; } html[data-watch-theme="light"] .watch-addcomment__composerOnline{ border-color:#ffffff; } /* Mobile: bigger avatars */ @media (max-width:640px){ .watch-comment__avatar{ width:40px !important; height:40px !important; } .watch-addcomment__composerAvatar{ width:36px !important; height:36px !important; } } /* ===== Category page: layout with right filters ===== */ .watch-catpage__layout{ display:block; position:relative; } .watch-catpage__main{ min-width:0; width:100%; transition:none; } .watch-home .watch-block > .watch-block__head{ display:block !important; } .watch-home .watch-block > .watch-block__head > .watch-block__head{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; gap:0 !important; } .watch-home .watch-block > .watch-block__head > .watch-block__head .watch-block__sortBtn{ position:static !important; transform:none !important; margin-left:auto !important; align-self:center !important; flex:0 0 auto !important; } .watch-catpage .watch-block__head{ display:flex !important; align-items:center !important; justify-content:space-between !important; } .watch-cat-title{ margin:0 !important; line-height:1 !important; } .watch-cat-titleLink{ display:inline-flex; align-items:center; gap:2px; color:inherit; text-decoration:none !important; } .watch-cat-titleArrow{ display:inline-flex; align-items:center; justify-content:center; width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; line-height:1 !important; vertical-align:middle !important; top:4px !important; position:relative !important; margin-left:2px !important; opacity:0 !important; pointer-events:none !important; transform:translateX(3px) translateY(0) !important; transition:opacity .2s ease, transform .2s ease !important; } .watch-cat-titleArrow .watch-mi{ display:block !important; font-size:17px !important; line-height:1 !important; transform:none !important; } .watch-cat-titleLink:hover .watch-cat-titleArrow, .watch-cat-titleLink:focus-visible .watch-cat-titleArrow{ opacity:1 !important; transform:translateX(0) translateY(0) !important; } @media (max-width:760px){ .watch-cat-titleArrow{ width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; top:1px !important; } .watch-cat-titleArrow .watch-mi{font-size:15px !important;} } .watch-catpage__filtersToggle{ margin-left:auto; } /* Sort button: icon only, no background rectangle, aligned with arrow */ .watch-block__sortBtn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:0; border:0; background:transparent !important; color:#EDEDED; cursor:pointer; padding:0; vertical-align:middle; border-radius:0; box-shadow:none !important; transition:none !important; } .watch-home .watch-block__head .watch-block__sortBtn, .watch-home .watch-block__head .watch-block__sortBtn:hover, .watch-home .watch-block__head .watch-block__sortBtn:focus, .watch-home .watch-block__head .watch-block__sortBtn:focus-visible, .watch-home .watch-block__head .watch-block__sortBtn:active{ background:transparent !important; border:0 !important; box-shadow:none !important; outline:0 !important; border-radius:0 !important; padding:0 !important; min-width:18px !important; min-height:18px !important; } .watch-block__sortBtn:hover{ color:#EDEDED; background:transparent !important; } .watch-block__sortBtn .watch-mi{ font-size:17px; line-height:1; } .watch-block__sortBtn .watch-block__sortListIcon{ width:16px; height:16px; display:inline-block; flex:0 0 16px; background:currentColor; opacity:.95; -webkit-mask:url('/templates/Watch/images/sort-filter-list.svg') center / contain no-repeat; mask:url('/templates/Watch/images/sort-filter-list.svg') center / contain no-repeat; } /* Sort dropdown */ .watch-block__sortDropdown{ position:fixed; top:0; left:0; right:auto; bottom:auto; display:block; width:198px; max-width:198px; min-width:198px; padding:6px; border-radius:12px; border:1px solid rgba(var(--w-ink-rgb),.10); background:rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--w-menu-shadow-strong); overflow:hidden; opacity:0; transform:translateY(8px) scale(.985); transform-origin:top left; pointer-events:none; transition:opacity .22s ease, transform .22s ease; z-index:12040; } .watch-block__sortDropdown.is-open-left{ transform-origin:top right; } .watch-block__sortDropdown.is-open-right{ transform-origin:top left; } .watch-block__sortDropdown.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .watch-block__sortItem{ display:flex; align-items:center; gap:8px; width:100%; padding:13px 15px; border-radius:8px; border:0; background:transparent; color:rgba(var(--w-ink-rgb),.86); font-size:14px; line-height:1.2; font-weight:500; letter-spacing:.15px; cursor:pointer; text-align:left; white-space:nowrap; } .watch-block__sortItem .watch-mi, .watch-block__sortItem .material-icons-outlined, .watch-block__sortItem .material-icons-round, .watch-block__sortItem .material-icons{ font-size:20px; line-height:1; opacity:.95; } .watch-block__sortSignalIcon{ width:16px; height:16px; flex:0 0 16px; display:inline-block; background:currentColor; opacity:.95; -webkit-mask:url('/templates/Watch/images/sort-rating-signal.svg') center / contain no-repeat; mask:url('/templates/Watch/images/sort-rating-signal.svg') center / contain no-repeat; } .watch-block__sortTimePastIcon{ width:16px; height:16px; flex:0 0 16px; display:inline-block; background:currentColor; opacity:.95; -webkit-mask:url('/templates/Watch/images/sort-time-past.svg') center / contain no-repeat; mask:url('/templates/Watch/images/sort-time-past.svg') center / contain no-repeat; } .watch-block__sortTimeNewIcon{ width:16px; height:16px; flex:0 0 16px; display:inline-block; background:currentColor; opacity:.95; -webkit-mask:url('/templates/Watch/images/sort-time-new.svg') center / contain no-repeat; mask:url('/templates/Watch/images/sort-time-new.svg') center / contain no-repeat; } .watch-block__sortItem[data-sort="rating_desc"] .watch-block__sortSignalIcon{ transform:rotate(-90deg); transform-origin:center; } .watch-block__sortItem[data-sort="rating_asc"] .watch-block__sortSignalIcon{ transform:rotate(-90deg) scaleX(-1); transform-origin:center; } .watch-block__sortItem:hover{ background:rgba(var(--w-ink-rgb),.06); } .watch-block__sortItem.is-active{ color:var(--w-accent); font-weight:700; } /* Category page right-side filters */ .watch-catpage__filters{ position:fixed; top:calc(var(--watch-topbar-h, 72px) + 14px); right:14px; width:min(340px, calc(100vw - 28px)); max-height:calc(100vh - var(--watch-topbar-h, 72px) - 28px); padding:16px; border-radius:18px; border:1px solid rgba(var(--w-ink-rgb),.12); background: linear-gradient(180deg, rgba(var(--w-ink-rgb),.018), rgba(var(--w-ink-rgb),.012)), rgba(var(--w-menu-bg-rgb), var(--w-menu-alpha)); backdrop-filter:blur(18px) saturate(110%); -webkit-backdrop-filter:blur(18px) saturate(110%); box-shadow:var(--w-menu-shadow-strong); transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform .24s cubic-bezier(.22,1,.36,1), opacity .2s ease; overflow-y:auto; z-index:12030; } .watch-catpage__filters.is-open{ transform:translateX(0); opacity:1; pointer-events:auto; } .watch-catpage__filtersBackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:12020; } .watch-catpage__filtersBackdrop.is-open{ opacity:1; pointer-events:auto; } body.watch-catfilters-open{ overflow:hidden; } @media (min-width: 981px){ body.watch-catfilters-open .watch-catpage .watch-catpage__main{ padding-right:0 !important; } @supports (padding-right: calc(min(340px, 100vw - 28px) + 18px)){ body.watch-catfilters-open .watch-catpage .watch-catpage__main{ padding-right:0 !important; } } } html[data-watch-theme="light"] .watch-catpage__filtersBackdrop{ background:rgba(20,24,34,.22); } .watch-catpage__filtersHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .watch-catpage__filtersTitle{ font-size:22px; font-weight:800; line-height:1; letter-spacing:.2px; color:rgba(var(--w-ink-rgb),.92); } .watch-catpage__filtersClose{ appearance:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px; border:1px solid transparent; background:var(--watch-topbtn-bg, rgba(var(--w-ink-rgb),.03)); color:rgba(var(--w-ink-rgb),.58); cursor:pointer; transform-origin:center; transition:transform .18s ease, background .15s ease, border-color .15s ease, box-shadow .18s ease; } .watch-catpage__filtersClose:hover{ background:var(--watch-topbtn-bg-hover, rgba(var(--w-ink-rgb),.07)); border-color:rgba(var(--w-ink-rgb),.14); color:rgba(var(--w-ink-rgb),.92); transform:scale(1.06); } .watch-catpage__filtersClose .watch-mi{ font-size:20px; line-height:1; } .watch-catpage__filterGroup{ margin-bottom:14px; } .watch-catpage__filterGroup + .watch-catpage__filterGroup{ padding-top:2px; } .watch-catpage__filterLabel{ display:block; font-size:13px; font-weight:700; color:rgba(var(--w-ink-rgb),.56); margin-bottom:7px; letter-spacing:.1px; text-transform:none; } .watch-catpage__filterInput{ width:100%; height:40px; border-radius:12px; border:1px solid rgba(var(--w-ink-rgb),.12); background:rgba(var(--w-ink-rgb),.035); color:rgba(var(--w-ink-rgb),.92); padding:0 13px; font-size:13px; font-weight:500; outline:none; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; -webkit-appearance:none; appearance:none; } select.watch-catpage__filterInput{ padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; } .watch-catpage__filterInput:focus{ border-color:rgba(var(--w-ink-rgb),.26); background:rgba(var(--w-ink-rgb),.05); box-shadow:0 0 0 3px rgba(var(--w-ink-rgb),.08); } .watch-catpage__genreList{ max-height:176px; overflow-y:auto; border:1px solid rgba(var(--w-ink-rgb),.12); border-radius:12px; background:rgba(var(--w-ink-rgb),.028); padding:6px; box-shadow:inset 0 1px 0 rgba(var(--w-ink-rgb),.04); color-scheme:dark; scrollbar-width:thin; scrollbar-color:rgba(var(--w-ink-rgb),.30) transparent; } .watch-catpage__genreItem{ display:flex; align-items:center; gap:11px; min-height:36px; padding:6px 10px; border-radius:8px; color:rgba(var(--w-ink-rgb),.90); font-size:14px; font-weight:500; cursor:pointer; position:relative; transition:background .16s ease, color .16s ease; } .watch-catpage__genreItem:hover{ background:rgba(var(--w-ink-rgb),.075); } .watch-catpage__genreItem input{ position:absolute; opacity:0; pointer-events:none; } .watch-catpage__genreItem span{ position:relative; padding-left:28px; } .watch-catpage__genreItem span:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:18px; border-radius:6px; border:1px solid rgba(var(--w-ink-rgb),.25); background:rgba(var(--w-ink-rgb),.06); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); transition:transform .18s ease, background .18s ease, border-color .18s ease; } .watch-catpage__genreItem input:checked + span:before{ background:rgba(80,170,255,.32); border-color:rgba(120,200,255,.55); } .watch-catpage__genreItem span:after{ content:""; position:absolute; left:6px; top:50%; transform:translateY(-55%) rotate(45deg); width:6px; height:10px; border-right:2px solid rgba(var(--w-ink-rgb),.92); border-bottom:2px solid rgba(var(--w-ink-rgb),.92); opacity:0; transition:opacity .18s ease; } .watch-catpage__genreItem input:checked + span:after{ opacity:1; } .watch-catpage__genreList::-webkit-scrollbar{ width:8px; height:8px; } .watch-catpage__genreList::-webkit-scrollbar-thumb{ background:rgba(var(--w-ink-rgb),.30) !important; border:2px solid transparent; background-clip:padding-box; border-radius:999px !important; } .watch-catpage__genreList::-webkit-scrollbar-track{ background:transparent !important; } .watch-catpage__range{ display:flex; align-items:center; gap:9px; } .watch-catpage__rangeInput{ flex:1; height:40px; border-radius:12px; border:1px solid rgba(var(--w-ink-rgb),.12); background:rgba(var(--w-ink-rgb),.035); color:rgba(var(--w-ink-rgb),.92); padding:0 12px; font-size:13px; font-weight:500; outline:none; text-align:center; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; } .watch-catpage__rangeInput:focus{ border-color:rgba(var(--w-ink-rgb),.26); background:rgba(var(--w-ink-rgb),.05); box-shadow:0 0 0 3px rgba(var(--w-ink-rgb),.08); } .watch-catpage__rangeDash{ color:rgba(var(--w-ink-rgb),.34); font-size:16px; font-weight:600; } /* Rating filter: slightly richer input styling */ .watch-catpage__filterGroup--rating .watch-catpage__range{ gap:10px; } .watch-catpage__range--rating .watch-catpage__rangeInput{ background: linear-gradient(180deg, rgba(var(--w-ink-rgb),.045), rgba(var(--w-ink-rgb),.028)); border-color:rgba(var(--w-ink-rgb),.16); color:rgba(var(--w-ink-rgb),.96); font-weight:600; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .watch-catpage__range--rating .watch-catpage__rangeInput:hover{ border-color:rgba(var(--w-ink-rgb),.22); background: linear-gradient(180deg, rgba(var(--w-ink-rgb),.058), rgba(var(--w-ink-rgb),.034)); } .watch-catpage__range--rating .watch-catpage__rangeInput:focus{ border-color:rgba(var(--w-ink-rgb),.28); box-shadow:0 0 0 3px rgba(var(--w-ink-rgb),.09); transform:translateY(-1px); } .watch-catpage__range--rating .watch-catpage__rangeDash{ color:rgba(var(--w-ink-rgb),.42); } /* rating number steppers */ .watch-catpage__range--rating .watch-catpage__rangeInput[type="number"]{ -moz-appearance:textfield; } .watch-catpage__range--rating .watch-catpage__rangeInput[type="number"]::-webkit-outer-spin-button, .watch-catpage__range--rating .watch-catpage__rangeInput[type="number"]::-webkit-inner-spin-button{ opacity:1; margin:0; min-height:22px; filter:brightness(1.06) contrast(1.04); cursor:pointer; } .watch-catpage__yearSlider{ --watch-slider-center-y: 20px; position:relative; height:52px; border-radius:0; border:0; background:transparent; padding:0; display:flex; align-items:center; } .watch-catpage__yearSliderTrack, .watch-catpage__yearSliderFill{ position:absolute; left:0; right:0; height:6px; border-radius:999px; top:calc(var(--watch-slider-center-y) - 3px); } .watch-catpage__yearSliderTrack{ background:rgba(var(--w-ink-rgb),.14); } .watch-catpage__yearSliderFill{ background:var(--w-accent); left:0; width:100%; } .watch-catpage__yearSliderInput{ position:absolute; left:0; right:0; top:calc(var(--watch-slider-center-y) - 9px); width:100%; height:18px; margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; } .watch-catpage__yearSliderInput::-webkit-slider-runnable-track{ height:6px; background:transparent; } .watch-catpage__yearSliderInput::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; border:0; background:#fff; margin-top:-6px; cursor:pointer; pointer-events:auto; box-shadow:0 2px 8px rgba(0,0,0,.35); } .watch-catpage__yearSliderInput::-moz-range-track{ height:6px; background:transparent; } .watch-catpage__yearSliderInput::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; border:0; background:#fff; cursor:pointer; pointer-events:auto; box-shadow:0 2px 8px rgba(0,0,0,.35); } .watch-catpage__yearSliderInput.is-min{ z-index:3; } .watch-catpage__yearSliderInput.is-max{ z-index:4; } .watch-catpage__yearSliderValues{ position:absolute; left:0; right:0; bottom:5px; display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:rgba(var(--w-ink-rgb),.64); letter-spacing:.2px; pointer-events:none; } .watch-catpage__ratingSlider .watch-catpage__yearSliderFill{ background:var(--w-accent); } .watch-catpage__filterApply{ width:100%; height:42px; border-radius:999px; border:0; background:rgba(var(--w-ink-rgb),.92); color:rgba(var(--w-bg-rgb),1); font-size:15px; font-weight:700; letter-spacing:.15px; cursor:pointer; margin-top:10px; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .watch-catpage__filterApply:hover{ background:rgba(var(--w-ink-rgb),1); transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.28); } .watch-catpage__filterReset{ width:100%; height:40px; border-radius:999px; border:1px solid rgba(var(--w-ink-rgb),.12); background:transparent; color:rgba(var(--w-ink-rgb),.64); font-size:13px; font-weight:600; cursor:pointer; margin-top:8px; transition:background .18s ease, color .18s ease, border-color .18s ease; } .watch-catpage__filterReset:hover{ background:rgba(var(--w-ink-rgb),.075); border-color:rgba(var(--w-ink-rgb),.2); color:rgba(var(--w-ink-rgb),.88); } /* Category page: filters toggle button (mobile) */ .watch-catpage__filtersToggle{ appearance:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; min-height:40px; border-radius:14px; border:1px solid transparent; background:rgba(var(--w-ink-rgb),.03); color:rgba(var(--w-ink-rgb),.92); cursor:pointer; box-shadow:none !important; outline:none !important; transition:transform .18s ease, background .15s ease, border-color .15s ease, color .15s ease; } .watch-catpage__filtersToggle:hover{ background:rgba(var(--w-ink-rgb),.07); border-color:rgba(var(--w-ink-rgb),.14); color:rgba(var(--w-ink-rgb),.92); transform:scale(1.06); } .watch-catpage__filtersToggle:focus-visible{ background:rgba(var(--w-ink-rgb),.07); border-color:rgba(var(--w-ink-rgb),.14); } .watch-catpage__filtersToggle .watch-mi{ font-size:24px; line-height:1; } .watch-catpage__filtersToggle .watch-block__sortListIcon{ width:22px; height:22px; flex:0 0 22px; line-height:1; } /* Main page: filter/sort button in the same chip style as topbar icon buttons */ .watch-home .watch-block__head .watch-block__sortBtn, .watch-home .watch-block__head .watch-block__sortBtn:hover, .watch-home .watch-block__head .watch-block__sortBtn:focus, .watch-home .watch-block__head .watch-block__sortBtn:focus-visible, .watch-home .watch-block__head .watch-block__sortBtn:active{ width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; border-radius:14px !important; border:1px solid rgba(var(--w-ink-rgb),.08) !important; background:rgba(var(--w-ink-rgb),.03) !important; color:rgba(var(--w-ink-rgb),.92) !important; padding:0 !important; box-shadow:none !important; outline:none !important; transition:background .15s ease, border-color .15s ease, transform .18s ease !important; } .watch-home .watch-block__head .watch-block__sortBtn:hover{ background:rgba(var(--w-ink-rgb),.07) !important; border-color:rgba(var(--w-ink-rgb),.14) !important; transform:scale(1.06); } .watch-home .watch-block__head .watch-block__sortBtn .watch-block__sortListIcon{ width:16px; height:16px; flex:0 0 16px; } @media (max-width: 980px){ .watch-catpage__filters{ top:0; right:0; max-height:none; height:100vh; bottom:0; width:min(320px, calc(100vw - 24px)); border-radius:0; border:0; border-left:1px solid rgba(var(--w-ink-rgb),.08); transform:translateX(100%); } .watch-home .watch-block__sortBtn{ margin-top:2px !important; } } /* ===== Genres on material page: grey, clickable, no underline ===== */ .watch-material__genres{ color:rgba(255,255,255,.65) !important; } .watch-genre-link{ color:rgba(255,255,255,.65) !important; text-decoration:none !important; cursor:pointer; transition:color .14s ease; } .watch-genre-link:hover{ color:rgba(255,255,255,.92) !important; text-decoration:none !important; } html[data-watch-theme="light"] .watch-material__genres{ color:rgba(0,0,0,.55) !important; } html[data-watch-theme="light"] .watch-genre-link{ color:rgba(0,0,0,.55) !important; } html[data-watch-theme="light"] .watch-genre-link:hover{ color:rgba(0,0,0,.88) !important; } /* ===== Anti-blur on first hover ===== Reveal animation must not keep/filter card layers. */ .watch-home.is-reveal-ready .watch-block .rail .mcard, .watch-catpage.is-reveal-ready .watch-catgrid .mcard{ transition-property: opacity !important; filter: none !important; } .watch-home.is-reveal-ready .watch-block:not(.is-reveal-visible) .rail .mcard, .watch-catpage.is-reveal-ready .watch-catgrid .mcard:not(.is-reveal-visible):not(.is-filter-hidden){ filter: none !important; } /* Keep text crisp while .mcard__img scales on hover: compensate text layer scale */ .watch-home .mcard:hover .mcard__overlayBody, .watch-home .mcard:focus-within .mcard__overlayBody, .watch-libv2 .mcard:hover .mcard__overlayBody, .watch-libv2 .mcard:focus-within .mcard__overlayBody, .watch-catpage .mcard:hover .mcard__overlayBody, .watch-catpage .mcard:focus-within .mcard__overlayBody{ transform: translate3d(0,0,0) scale(var(--w-poster-wrap-text-scale)) !important; transform-origin: left bottom !important; } /* ========================================================================== Watch settings: refined layout (hierarchy, inputs, buttons, hint box). Applies in both modal (#watchSettingsModal) and standalone /settings. Placed at end of watch.css so it wins the cascade against the earlier "borderless" overrides (both use !important; later wins on equal specificity). ========================================================================== */ /* Section title — small uppercase accent marker */ .watch-settingsmodal .watch-settings__sectionTitle, html.watch-settings-page .watch-settings__sectionTitle{ font-size:11px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.1em !important; color:rgba(var(--w-ink-rgb),.58) !important; margin:0 0 18px 0 !important; } /* Field labels — compact, secondary weight */ .watch-settingsmodal .watch-settings__label, html.watch-settings-page .watch-settings__label{ font-size:12px !important; font-weight:700 !important; color:rgba(var(--w-ink-rgb),.72) !important; letter-spacing:0 !important; margin:0 0 8px 0 !important; display:block !important; } /* Row spacing */ .watch-settingsmodal .watch-settings__row, html.watch-settings-page .watch-settings__row{ margin-bottom:18px !important; } .watch-settingsmodal .watch-settings__row:last-of-type, html.watch-settings-page .watch-settings__row:last-of-type{ margin-bottom:0 !important; } /* Inputs / textareas / selects — visible but subtle */ .watch-settingsmodal .watch-settings__input, .watch-settingsmodal .watch-settings__textarea, html.watch-settings-page .watch-settings__input, html.watch-settings-page .watch-settings__textarea{ width:100% !important; border-radius:12px !important; border:1px solid rgba(var(--w-ink-rgb),.10) !important; background:rgba(var(--w-ink-rgb),.04) !important; color:var(--w-text) !important; padding:11px 14px !important; font-size:14px !important; font-weight:500 !important; line-height:1.4 !important; box-shadow:none !important; transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important; outline:none !important; box-sizing:border-box !important; } .watch-settingsmodal .watch-settings__input:hover, .watch-settingsmodal .watch-settings__textarea:hover, html.watch-settings-page .watch-settings__input:hover, html.watch-settings-page .watch-settings__textarea:hover{ background:rgba(var(--w-ink-rgb),.06) !important; border-color:rgba(var(--w-ink-rgb),.16) !important; } .watch-settingsmodal .watch-settings__input:focus, .watch-settingsmodal .watch-settings__textarea:focus, html.watch-settings-page .watch-settings__input:focus, html.watch-settings-page .watch-settings__textarea:focus{ background:rgba(var(--w-ink-rgb),.08) !important; border-color:rgba(var(--w-ink-rgb),.30) !important; box-shadow:0 0 0 3px rgba(var(--w-ink-rgb),.08) !important; } .watch-settingsmodal .watch-settings__textarea, html.watch-settings-page .watch-settings__textarea{ resize:vertical !important; min-height:96px !important; max-height:220px !important; line-height:1.5 !important; } /* Hint text under fields */ .watch-settingsmodal .watch-settings__muted, html.watch-settings-page .watch-settings__muted{ margin-top:8px !important; font-size:12px !important; color:rgba(var(--w-ink-rgb),.48) !important; line-height:1.45 !important; } /* Hint-box: compact card with icon + text + action (used for Avatar/Banner) */ .watch-settings__hintBox{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid rgba(var(--w-ink-rgb),.10) !important; background:rgba(var(--w-ink-rgb),.03) !important; } .watch-settings__hintBox__icon{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(var(--w-ink-rgb),.06); color:rgba(var(--w-ink-rgb),.78); } .watch-settings__hintBox__icon .material-icons-outlined{ font-size:20px; line-height:1; } .watch-settings__hintBox__text{ flex:1 1 auto; min-width:0; font-size:13px; color:rgba(var(--w-ink-rgb),.78); line-height:1.45; } .watch-settings__hintBox__action{ flex:0 0 auto; padding:8px 14px; border-radius:10px; border:1px solid rgba(var(--w-ink-rgb),.14) !important; background:transparent !important; color:var(--w-text) !important; font-size:12px !important; font-weight:700 !important; text-decoration:none !important; white-space:nowrap; transition:background-color .16s ease, border-color .16s ease, transform .16s ease; } .watch-settings__hintBox__action:hover{ background:rgba(var(--w-ink-rgb),.08) !important; border-color:rgba(var(--w-ink-rgb),.26) !important; transform:translateY(-1px); } @media (max-width: 520px){ .watch-settings__hintBox{ flex-wrap:wrap; } .watch-settings__hintBox__action{ margin-left:auto; } } /* Actions row: separator line, primary button stands out, logout = right ghost */ .watch-settingsmodal .watch-settings__actions, html.watch-settings-page .watch-settings__actions{ margin-top:24px !important; padding-top:18px !important; border-top:1px solid rgba(var(--w-ink-rgb),.08) !important; display:flex !important; align-items:center !important; gap:8px !important; } /* Note: button / ghost rules moved to inline