/* Modern theme overrides (safe CSS-only). Scope: */ /* 1) Palette via CSS variables (fallback to existing where possible) */ html, body { overflow-x: hidden; } :root { /* Bulma Variables Bridge */ --bulma-primary: var(--color-primary); --color-background-body: #0d0f14; --color-background-card: #161b22; --color-background-search: #0d1117; --color-background-menu: #161b22; --color-text: #f0f6fc; --color-text-muted: #8b949e; --color-primary: #2dd4bf; --color-primary-hover: #5eead4; --color-border: #30363d; --color-border-subtle: rgba(255, 255, 255, 0.05); --color-danger: #f85149; --color-success: #3fb950; --color-icons-default: #7dd87d; /* Surface colors for modern theme */ --surface-1: #161b22; --surface-2: #21262d; --surface-3: #30363d; /* Accent Variants */ --theme-teal: #2dd4bf; --theme-violet: #a78bfa; --theme-rose: #fb7185; --theme-amber: #fbbf24; --theme-blue: #60a5fa; --theme-sky: #38bdf8; --theme-emerald: #34d399; --theme-red: #f87171; --theme-indigo: #6366f1; --theme-cyan: #22d3ee; --theme-lime: #a3e635; --theme-yellow: #facc15; --theme-orange: #fb923c; --theme-pink: #f472b6; --theme-purple: #c084fc; --theme-fuchsia: #e879f9; --theme-green: #22c55e; --theme-mint: #5eead4; --theme-gold: #eab308; --theme-copper: #d97706; --theme-magenta: #d946ef; --theme-slate: #94a3b8; --theme-zinc: #a1a1aa; --accent: var(--theme-teal); --accent-2: var(--theme-violet); --card-radius: var(--video-card-rounded, 16px); --container-max-width: 1680px; --cards-cols-xxl: 6; --cards-cols-xl: 5; --cards-cols-lg: 3; --cards-cols-md: 2; --cards-cols-sm: 1; /* Compatibility with old variable names used in this file */ --border-subtle: rgba(255, 255, 255, 0.05); --danger: #f85149; --ok: #3fb950; /* Bulma Bridge */ --bulma-card-background-color: #161b22; --bulma-card-color: #f0f6fc; /* Tabler/Style bridge */ --tblr-primary: var(--accent); --tblr-primary-rgb: 45, 212, 191; --tblr-body-bg: #0d0f14; --tblr-bg-surface: #161b22; --tblr-border-color: #30363d; --url-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-eye' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E%3Cpath d='M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6' /%3E%3C/svg%3E"); --url-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-clock' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 7l0 5l3 3' /%3E%3C/svg%3E"); --url-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-calendar' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h16' /%3E%3Cpath d='M11 15h1' /%3E%3Cpath d='M12 15v3' /%3E%3C/svg%3E"); --url-screens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-photo' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8h.01' /%3E%3Cpath d='M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z' /%3E%3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5' /%3E%3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3' /%3E%3C/svg%3E"); --url-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-download' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2' /%3E%3Cpath d='M7 11l5 5l5 -5' /%3E%3Cpath d='M12 4l0 12' /%3E%3C/svg%3E"); --card-gap: 0.5rem; --section-gap: 1rem; } body.theme-accent-teal { --accent: var(--theme-teal); --accent-2: var(--theme-violet); --tblr-primary-rgb: 45, 212, 191; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-violet { --accent: var(--theme-violet); --accent-2: var(--theme-teal); --tblr-primary-rgb: 167, 139, 250; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-rose { --accent: var(--theme-rose); --accent-2: var(--theme-amber); --tblr-primary-rgb: 251, 113, 133; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-amber { --accent: var(--theme-amber); --accent-2: var(--theme-rose); --tblr-primary-rgb: 251, 191, 36; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-blue { --accent: var(--theme-blue); --accent-2: var(--theme-sky); --tblr-primary-rgb: 96, 165, 250; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-sky { --accent: var(--theme-sky); --accent-2: var(--theme-blue); --tblr-primary-rgb: 56, 189, 248; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-emerald { --accent: var(--theme-emerald); --accent-2: var(--theme-teal); --tblr-primary-rgb: 52, 211, 153; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-red { --accent: var(--theme-red); --accent-2: var(--theme-rose); --tblr-primary-rgb: 248, 113, 113; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-indigo { --accent: var(--theme-indigo); --accent-2: var(--theme-violet); --tblr-primary-rgb: 99, 102, 241; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-cyan { --accent: var(--theme-cyan); --accent-2: var(--theme-blue); --tblr-primary-rgb: 34, 211, 238; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-lime { --accent: var(--theme-lime); --accent-2: var(--theme-emerald); --tblr-primary-rgb: 163, 230, 53; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-yellow { --accent: var(--theme-yellow); --accent-2: var(--theme-amber); --tblr-primary-rgb: 250, 204, 21; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-orange { --accent: var(--theme-orange); --accent-2: var(--theme-red); --tblr-primary-rgb: 251, 146, 60; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-pink { --accent: var(--theme-pink); --accent-2: var(--theme-rose); --tblr-primary-rgb: 244, 114, 182; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-purple { --accent: var(--theme-purple); --accent-2: var(--theme-fuchsia); --tblr-primary-rgb: 192, 132, 252; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-fuchsia { --accent: var(--theme-fuchsia); --accent-2: var(--theme-purple); --tblr-primary-rgb: 232, 121, 249; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-green { --accent: var(--theme-green); --accent-2: var(--theme-emerald); --tblr-primary-rgb: 34, 197, 94; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-mint { --accent: var(--theme-mint); --accent-2: var(--theme-teal); --tblr-primary-rgb: 94, 234, 212; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-gold { --accent: var(--theme-gold); --accent-2: var(--theme-amber); --tblr-primary-rgb: 234, 179, 8; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-copper { --accent: var(--theme-copper); --accent-2: var(--theme-orange); --tblr-primary-rgb: 217, 119, 6; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-magenta { --accent: var(--theme-magenta); --accent-2: var(--theme-fuchsia); --tblr-primary-rgb: 217, 70, 239; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-slate { --accent: var(--theme-slate); --accent-2: var(--theme-sky); --tblr-primary-rgb: 148, 163, 184; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-zinc { --accent: var(--theme-zinc); --accent-2: var(--theme-blue); --tblr-primary-rgb: 161, 161, 170; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body { background-color: var(--color-background-body); background-image: linear-gradient(180deg, rgba(13, 15, 20, 0) 0%, #0d0f14 100%); /* прозрачность декоративного фона (может переопределяться из JS) */ --bg-opacity: 0.18; /* акцентные цвета для декоративного фона (JS может переопределить) */ --bg-accent-1: var(--accent); --bg-accent-2: var(--accent-2); /* Макет: чтобы футер прижимался к низу экрана */ min-height: 100vh; display: flex; flex-direction: column; /* прозрачность градиента фона карточек */ --card-bg-opacity: 0.08; color: var(--color-text); padding-top: 70px; /* Отступ под шапку */ } .container-xl { max-width: var(--container-max-width) !important; } @media (max-width: 768px) { body { padding-top: 60px; } } /* Шрифты для body */ body, input, textarea, select, button { font-family: var(--site-font, 'Inter', sans-serif); } .card__video { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100% ); border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--card-radius, 16px) !important; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 100% !important; margin: 0 !important; margin-bottom: 0.8rem !important; display: block; } .container { padding: 0 0.5rem; } /* 14) Video Hero Section (Full width player) */ .video-hero-section { margin-bottom: 2rem; padding: 0.5rem 0; position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); } h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } a { color: #c7d2fe; } a:hover { color: #93c5fd; } /* 3) Header bar */ header.navbar { background: rgba(22, 27, 34, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); padding: .5rem 0 !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); /* position and top are set via body classes or default below */ } /* Default non-sticky navbar for modern */ body:not(.theme-modern--sticky-header) header.navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; } .navbar-brand { font-weight: 800; letter-spacing: -0.5px; } .navbar-brand a { text-decoration: none !important; } .navbar-brand .text-primary { color: var(--accent) !important; text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 40%, transparent); text-decoration: none !important; } .navbar-toggler { border: none !important; padding: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; } .navbar-toggler i { color: var(--accent) !important; font-size: 1.8rem !important; transition: transform 0.3s ease; } .navbar-toggler:not(.collapsed) i { transform: rotate(90deg); } .nav-link { font-weight: 500; transition: all 0.2s; } .nav-link:hover { color: var(--accent) !important; } .navbar-nav .nav-link i { color: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 30%, transparent)); } .header-action__text { display: none; } .header-row { justify-content: space-between; align-items: center; row-gap: 0.5rem; } .header-row .navbar-brand { flex: 0 0 auto; margin-right: auto; } .header-search { order: 3; flex: 0 0 100%; width: 100%; margin-top: 0.5rem; } .header-actions { order: 2; margin-left: auto; flex: 0 0 auto; } @media (min-width: 900px) { .header-row { flex-wrap: nowrap; } .header-search { order: 2; flex: 1 1 auto; margin: 0 1.25rem; min-width: 320px; max-width: calc(100% / 2); } .header-search { width: auto; margin-top: 0; } .header-search .form-control { width: 100%; } .header-actions { order: 3; } } @media (min-width: 580px) and (max-width: 1000px) { .header-actions .nav-link.header-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #e5e7eb !important; } .header-actions .nav-link.header-action i { font-size: 1.1rem !important; } .header-action__text { display: inline; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2px; } } @media (min-width: 1000px) { .header-action__text { display: inline; } #toggle-categories { display: none; } .categories-collapse, .categories-collapse.collapse { position: static; opacity: 1; visibility: visible; transform: none; max-height: none; overflow: visible; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: none; display: block !important; height: auto !important; } .categories-section-wrapper { z-index: 900 !important; } .playlist-item-card { width: 130px !important; } } @media (max-width: 900px) { main { padding-top: 84px; } } .playlist-item-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 110px !important; width: 100% !important; background: linear-gradient(145deg, rgba(22, 27, 34, 0.4), rgba(22, 27, 34, 0.8)) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; overflow: hidden; margin: 0 auto; border-radius: 12px !important; max-width: 100%; } .playlist-item-card:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; background: linear-gradient(145deg, rgba(22, 27, 34, 0.6), rgba(22, 27, 34, 0.9)) !important; } .playlist-item-card .avatar { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .playlist-item-card:hover .avatar { background: var(--accent); color: #000 !important; transform: scale(1.1); } .playlist-item-card .card-title { font-size: 0.85rem; font-weight: 500; transition: color 0.2s; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; height: 2.4em; margin-top: 0; margin-bottom: 0; } .playlist-item-card:hover .card-title { color: var(--accent); } .playlist-item-card .btn-action { color: var(--color-text-muted); padding: 0.25rem; border-radius: 4px; transition: all 0.2s; z-index: 10; position: relative; } .playlist-item-card .btn-action:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-text); } /* Scrollable tags (category playlists) */ .scrollable-tags { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; gap: 0.75rem; padding: 8px 0 12px; -webkit-overflow-scrolling: touch; user-select: none; scrollbar-width: thin; scrollbar-color: rgba(var(--tblr-primary-rgb), 0.55) rgba(255, 255, 255, 0.06); } .scrollable-tags-static { flex-wrap: wrap; overflow-x: visible; white-space: normal; } .scrollable-tags-static .badge { flex: 0 0 auto; } .scrollable-tags::-webkit-scrollbar { height: 6px; } .scrollable-tags::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; } .scrollable-tags::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(var(--tblr-primary-rgb), 0.75), rgba(var(--tblr-primary-rgb), 0.35)); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; } .scrollable-tags::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(var(--tblr-primary-rgb), 0.9), rgba(var(--tblr-primary-rgb), 0.5)); } .scrollable-tags:active { cursor: grabbing; } .scrollable-tags .badge { flex: 0 0 auto; } .scrollable-tags--hint { position: relative; } .scrollable-tags--hint::after { content: ""; position: absolute; top: 0; right: 0; width: 48px; height: 100%; pointer-events: none; background: linear-gradient(90deg, rgba(13, 15, 20, 0) 0%, rgba(13, 15, 20, 0.55) 70%, rgba(13, 15, 20, 0.9) 100%); } /* 4) Search */ .input-icon .form-control { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--color-text); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 3rem; padding-right: 2.5rem; } .input-icon { position: relative; } .input-icon .form-control:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important; } .input-icon-addon { color: var(--accent); opacity: 0.8; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; pointer-events: none; display: inline-flex; align-items: center; } .input-icon-action { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 6; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .input-icon-action:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); color: #fff; } /* Включаем "липкую" шапку, когда флаг активен */ body.theme-modern--sticky-header header.navbar { position: fixed; /* Для Modern темы фиксируем навсегда при включении опции */ top: 0; left: 0 !important; right: 0 !important; z-index: 1000; } /* Основной контент растягивается, футер уходит вниз */ main { flex: 1 0 auto; } /* Опциональный полупрозрачный декоративный фон для modern‑темы */ /* Включается классом theme-modern--bg на body */ body.theme-modern--bg { /* несколько слоёв создают лёгкий цветной мэш позади контента */ background-image: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--bg-accent-1) calc(var(--bg-opacity) * 100%), transparent) 0%, rgba(0, 0, 0, 0) 60%), radial-gradient(1000px 500px at 80% 100%, color-mix(in srgb, var(--bg-accent-2) calc(var(--bg-opacity) * 100%), transparent) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, var(--color-background-body) 0%, #000000 100%); background-attachment: fixed, fixed, fixed; background-repeat: no-repeat; } /* 5) Video Cards */ .card.card-link { background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: var(--card-radius) !important; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .card.card-link::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); pointer-events: none; z-index: 1; } .card.card-link:hover { transform: translateY(-8px) scale(1.02); border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent) !important; } .card.card-link:hover::after { background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); } .video-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); font-size: 0.85rem; line-height: 1.35; height: 40px; margin-bottom: 0.5rem; transition: color 0.3s; text-decoration: none !important; } .card.card-link .card-body { display: flex !important; flex-direction: column !important; min-height: 100px; padding: 0.5rem !important; position: relative; z-index: 2; } .playlist-item-card .card-body { padding: 0.5rem !important; min-height: 0 !important; } .card.card-link:hover .video-card-title { color: var(--accent); } .video-card-meta { font-size: 0.75rem !important; color: var(--color-text-muted) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; text-decoration: none !important; } .video-card-meta-footer { margin-top: auto !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 0.5rem !important; } .video-card-meta-footer i { color: var(--accent); } .col-lg-3 .card__video, .sidebar-scrollable .d-flex.flex-column { border-radius: var(--card-radius) !important; } /* Aspect ratio 16:9 fix for modern theme */ .ratio-16x9 { position: relative; width: 100%; padding-bottom: 56.25%; height: 0 !important; overflow: hidden; background: #000; } .video-container.ratio-16x9 { padding-bottom: 56.25%; height: 0 !important; overflow: hidden; background: #000; } .ratio-16x9 > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Blocks styling */ .card { background: rgba(22, 27, 34, 0.6) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--card-radius); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } .card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.12) !important; } .card-header { background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 0.75rem 1rem !important; } .card-title { color: var(--color-text); font-weight: 700; letter-spacing: 0.5px; text-decoration: none !important; } .card-body { color: var(--color-text); } /* Categories Collapse */ .categories-section-wrapper { position: relative; z-index: 1040; } .categories-collapse { background: rgba(13, 15, 20, 0.85) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; position: fixed; top: 56px; left: 0; right: 0; z-index: 1040; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; visibility: hidden; transform: translateY(-10px); max-height: 80vh; overflow-y: auto; } .categories-collapse::-webkit-scrollbar { width: 4px; } .categories-collapse::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .categories-collapse.show, .categories-collapse.collapsing { opacity: 1; visibility: visible; } .categories-collapse.show { transform: translateY(0); } /* При фиксированной шапке */ body.theme-modern--sticky-header .categories-collapse { top: 56px; } @media (max-width: 768px) { .categories-collapse { top: 56px; } } .categories-collapse .btn-category { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px; padding: 8px 14px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text) !important; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .categories-collapse .btn-category:hover { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 24px rgba(0,0,0,0.4), 0 0 15px color-mix(in srgb, var(--accent) 15%, transparent); color: #fff !important; } /* Контейнер внутри коллапса для отступов */ .categories-collapse .container-xl { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .btn-category { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px; padding: 10px 18px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text) !important; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: inline-flex; align-items: center; gap: 10px; } .btn-category:hover { background: color-mix(in srgb, var(--accent) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 20px rgba(0,0,0,0.3), 0 0 15px color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent) !important; } .btn-category__cover { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 6px 12px rgba(0,0,0,0.45); background: rgba(0,0,0,0.35); } .category-cover-tooltip { position: fixed; width: 180px; height: 180px; border-radius: 12px; overflow: hidden; background: #0d0f14; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4) inset; opacity: 0; transform: scale(0.96); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; z-index: 2100; } .category-cover-tooltip.is-visible { opacity: 1; transform: scale(1); } .category-cover-tooltip img { width: 100%; height: 100%; object-fit: cover; display: block; } .hr-text { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; } .hr-text::before, .hr-text::after { border-top-color: var(--color-border) !important; } .badge.bg-secondary-lt, .badge.badge-outline, .btn-xs.btn-outline-secondary, .btn-icon.btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--color-text) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px; padding: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; cursor: pointer; text-decoration: none !important; } .badge.bg-secondary-lt:hover, .badge.badge-outline:hover, .btn-xs.btn-outline-secondary:hover, .btn-icon.btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-danger:hover { background: color-mix(in srgb, var(--accent) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); color: var(--accent) !important; } .btn-outline-info:hover { color: #0ea5e9 !important; border-color: #0ea5e9 !important; background: rgba(14, 165, 233, 0.15) !important; } .btn-outline-success:hover { color: var(--color-success) !important; border-color: var(--color-success) !important; background: rgba(63, 185, 80, 0.15) !important; } .btn-outline-warning:hover { color: #f59e0b !important; border-color: #f59e0b !important; background: rgba(245, 158, 11, 0.15) !important; } .btn-outline-danger:hover { color: var(--color-danger) !important; border-color: var(--color-danger) !important; background: rgba(248, 81, 73, 0.15) !important; } .badge.bg-secondary-lt i, .badge.badge-outline i, .btn-xs.btn-outline-secondary i, .btn-icon.btn-outline-secondary i, .btn-outline-info i, .btn-outline-success i, .btn-outline-warning i, .btn-outline-danger i { color: var(--accent); opacity: 0.8; } .btn-outline-info i { color: #0ea5e9; } .btn-outline-success i { color: var(--color-success); } .btn-outline-warning i { color: #f59e0b; } .btn-outline-danger i { color: var(--color-danger); } /* Sidebar scrollable */ .sidebar-scrollable { max-height: none; overflow-y: visible; padding-right: 0; } .alert-info { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent); border-left: 4px solid var(--accent); border-color: var(--color-border); color: var(--color-text); } .alert-danger { background: linear-gradient(90deg, color-mix(in srgb, var(--color-danger) 15%, transparent), transparent); border-left: 4px solid var(--color-danger); border-color: var(--color-border); color: var(--color-text); } .alert-warning { background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 15%, transparent), transparent); border-left: 4px solid #f59e0b; border-color: var(--color-border); color: var(--color-text); } /* 6) Pagination */ .form-control, .form-select { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text) !important; border-radius: 10px !important; transition: all 0.3s ease; } .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important; outline: none !important; } .pagination-amber .page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 40%, transparent); } .pagination-amber .page-link { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text) !important; border-radius: 10px !important; margin: 0 3px; transition: all 0.3s ease; } .pagination-amber .page-link:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--accent) !important; transform: translateY(-2px); } .pagination-amber .page-item.disabled .page-link { background: rgba(255, 255, 255, 0.01) !important; opacity: 0.3; border-color: transparent !important; } /* Plyr Customization */ .plyr { overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); background: #000 !important; } .plyr--full-ui.plyr--video .plyr__control--overlaid { background: color-mix(in srgb, var(--accent) 80%, transparent) !important; padding: 14px !important; } .plyr--video { --plyr-color-main: var(--accent); } .plyr__video-wrapper { background: #000 !important; } /* 8) Buttons */ .btn-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important; border: none !important; box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 30%, transparent) !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 40%, transparent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 110%, white), var(--accent)) !important; } .btn-outline-primary { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important; color: var(--accent) !important; background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; padding: 0.5rem 1.2rem; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none !important; } .btn-outline-primary:hover { background: var(--accent) !important; color: #000 !important; transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-outline-secondary { border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text-muted) !important; background: rgba(255, 255, 255, 0.02) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; padding: 0.5rem 1.2rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none !important; } .btn-outline-secondary:hover, .btn-outline-secondary.active { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: var(--color-text) !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .btn-outline-secondary.active { background: rgba(255, 255, 255, 0.12) !important; border-color: var(--accent) !important; color: var(--accent) !important; transform: none; } .footer { background-color: #0d0f14 !important; border-top: 1px solid var(--color-border) !important; } .footer h4 { color: var(--accent) !important; } .footer a.text-muted:hover { color: #fff !important; } .card-header .card-title { margin-bottom: 0; } .similar__videos h2 { color: var(--color-text); font-weight: 700; } .card-body.p-0 .alert.m-3 { margin: 1.5rem !important; } .spinner-border.text-primary, .spinner-border { color: var(--accent) !important; } /* 9) Unused unified classes (cleaning up) */ .statistics__video, .video-hero-grid, .video-tabs { display: none; /* or remove if absolutely sure */ } .tab-pane.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .video-tabs { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 0; margin-left: 0; margin-right: 0; } .video-tab-item { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 10px 12px; font-size: 13px; white-space: normal; text-align: center; } .video-tab-item.js-scroll-to-comments { flex-basis: 100%; } } @media (max-width: 480px) { .video-tab-item { flex-basis: 100%; } } /* Tab Content Styling */ .video-tabs-content { margin-top: 24px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .statistics__video { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); } .statistics__video span { width: auto !important; padding: 0 !important; border: none !important; font-size: 14px; color: #94a3b8; display: flex; align-items: center; gap: 6px; } .statistics__video span i { color: var(--accent); font-size: 16px; width: 1.2rem; height: 1.2rem; display: inline-block; vertical-align: text-top; background-size: contain; background-repeat: no-repeat; background-position: center; } .statistics__video span i.icons\:view { background-image: var(--url-view); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:time { background-image: var(--url-time); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:data { background-image: var(--url-data); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:screens { background-image: var(--url-screens); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:down { background-image: var(--url-down); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video.tech-stats { margin-top: -10px; border-bottom: none; margin-bottom: 10px; } .description__video { line-height: 1.7; color: #cbd5e1; font-size: 15px; margin-bottom: 24px; } /* Screenshots Grid */ .screenshots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .screenshot-item { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-subtle); transition: all 0.3s ease; } .screenshot-item:hover { transform: scale(1.02); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .screenshot-item img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 480px) { .screenshots-grid { grid-template-columns: 1fr; } } /* 6) Comments Section Styling */ .comments-section { padding-top: 40px; margin-bottom: 60px; border-top: 1px solid var(--border-subtle); } .comments-title { font-size: 26px; font-weight: 700; color: var(--color-text); letter-spacing: -0.025em; } .comments-hot-icon { font-size: 24px; color: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); } .comments-section .alert { border-radius: 12px; padding: 14px 20px; margin-bottom: 24px; border: 1px solid transparent; } .comments-controls { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; } .btn-sort { background: none; border: none; color: var(--color-text-muted); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; } .btn-sort:hover { color: var(--color-text); background: color-mix(in srgb, var(--accent) 10%, transparent); } .btn-sort.is-active { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); } .comment-item { margin-bottom: 24px; position: relative; padding: 20px; background: var(--surface-1); border-radius: 16px; border: 1px solid var(--border-subtle); transition: all 0.2s ease; } .comment-main { display: flex; gap: 20px; } .comment-avatar { width: 48px; height: 48px; flex-shrink: 0; background: var(--surface-3); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); } .comment-avatar.is-admin { border: 2px solid var(--danger); box-shadow: 0 0 15px color-mix(in srgb, var(--danger) 25%, transparent); } .comment-avatar i { width: 26px; height: 26px; margin: 0; opacity: 0.8; } .comment-content { flex-grow: 1; } .comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .comment-author { font-weight: 700; font-size: 16px; color: var(--color-text); } .comment-author.text-admin { } .badge { display: inline-block; padding: 0.35em 0.8em; font-size: 0.75rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 6px; transition: all 0.2s ease; text-decoration: none !important; } .badge-danger { color: #fff; background-color: var(--danger); } .comment-date { font-size: 13px; color: var(--color-text-muted); } .comment-message { font-size: 15px; color: var(--color-text); line-height: 1.6; word-break: break-word; } .comment-message a { color: var(--accent); text-decoration: none; font-weight: 600; } .comment-message a:hover { text-decoration: underline; color: var(--accent); } .comment-side { display: flex; align-items: flex-start; } .comment-voting { display: flex; align-items: center; gap: 10px; background: var(--surface-2); padding: 6px 14px; border-radius: 24px; border: 1px solid var(--border-subtle); } .btn-vote-inline { background: none; border: none; cursor: pointer; padding: 4px; font-size: 16px; opacity: 0.7; transition: all 0.2s; border-radius: 50%; } .btn-vote-inline:hover { opacity: 1; background: rgba(255,255,255,0.1); } .btn-vote-inline:active { transform: scale(1.25); } .vote-count { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; color: var(--color-text); } .comment-actions { display: flex; gap: 24px; margin-top: 16px; border-top: 1px solid var(--color-border-subtle); padding-top: 12px; } .btn-action { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--color-text-muted); font-weight: 600; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; } .btn-action:hover { color: var(--color-text); background: color-mix(in srgb, var(--accent) 12%, transparent); } .btn-action.text-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); } .comment-replies { margin-left: 54px; margin-top: 20px; border-left: 2px solid var(--surface-3); padding-left: 24px; } .comment-replies .comment-item { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 0; padding: 16px 0; margin-bottom: 0; } .comment-replies .comment-item:last-child { border-bottom: none; } /* Forms in Modern Theme */ .comments-form, .reply-form, .reply-form-wrap, .edit-form-wrap { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 30px; margin-bottom: 48px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); } .reply-form-wrap, .edit-form-wrap { margin-top: 20px; margin-bottom: 20px; padding: 20px; border-radius: 16px; } .comments-form .form-control, .reply-form .form-control, .reply-form-wrap .form-control, .edit-form-wrap .form-control { background: var(--surface-2); border: 1px solid var(--border-subtle); color: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: none; padding: 14px 18px; font-size: 15px; width: 100%; transition: all 0.2s; } .form-control-sm { padding: 10px 14px !important; font-size: 14px !important; } .comments-form .form-control:focus, .reply-form .form-control:focus, .reply-form-wrap .form-control:focus, .edit-form-wrap .form-control:focus { border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .comments-form .btn-primary, .reply-form .btn-primary, .reply-form-wrap .btn-primary, .edit-form-wrap .btn-primary { background: var(--accent); border: none; padding: 14px 36px; border-radius: 12px; font-weight: 700; color: #000; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .btn-primary.btn-sm { padding: 10px 24px !important; } .comments-form .btn-primary:hover, .reply-form .btn-primary:hover, .reply-form-wrap .btn-primary:hover, .edit-form-wrap .btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-primary:active, .reply-form .btn-primary:active { transform: translateY(0); } .js-load-more-comments { display: block; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--color-text); padding: 14px 24px; border-radius: 12px; width: 100%; margin: 24px 0; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .js-load-more-comments:hover { background: var(--surface-3); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .js-load-more-comments:active { transform: translateY(0); } .js-load-more-comments:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Show more replies button styling */ .show-more-replies-wrap { margin-top: 12px; margin-bottom: 8px; } .btn-show-more-replies { background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--color-text); padding: 8px 20px; border-radius: 24px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 10px; opacity: 0.9; } .btn-show-more-replies:hover { background: var(--surface-3); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 1; } .btn-show-more-replies:active { transform: translateY(0); } .btn-show-more-replies::before { content: '⤵'; font-size: 16px; opacity: 0.8; } @media (max-width: 768px) { .comment-replies { margin-left: 16px; padding-left: 16px; } .comment-main { flex-wrap: wrap; gap: 12px; } .comment-side { width: 100%; justify-content: flex-end; margin-top: 0; } .comment-avatar { width: 40px; height: 40px; } .comment-item { padding: 16px; } .comment-actions { gap: 12px; flex-wrap: wrap; } .comment-meta { margin-top: 8px; font-size: 12px; opacity: 0.6; } } .comment-meta { margin-top: 12px; font-size: 13px; color: #94a3b8; } .header__search button { border-left: 1px solid var(--border-subtle); border-radius: 0 .6rem .6rem 0; background: transparent; } .header__search button:hover { background: var(--surface-2); } .btn-vote { background: rgba(255, 255, 255, 0.02) !important; color: var(--color-text-muted) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 12px; padding: 10px 18px; font-weight: 700; font-size: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; } .btn-vote:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: var(--color-text) !important; transform: translateY(-2px); box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 15%, transparent); } .btn-vote.is-active { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent); } /* 8) Categories & Trends Links */ .categories-link li a, .trands-link li a, .playlist-link li a { border-radius: 8px; transition: all 0.2s; } .categories-link li a { background: #064e3b; color: #ccfbf1; } .categories-link li a:hover { background: #0f766e; } .trands-link li a { background: #4c1d95; color: #ede9fe; } .trands-link li a:hover { background: #6d28d9; } .playlist-link li a { background: #1e293b; color: #f1f5f9; } .playlist-link li a:hover { background: #334155; } /* 9) Pagination */ .pagination-modern { margin: 2rem 0; display: flex; justify-content: center; } .pagination-modern__list { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; } .pagination-modern__item { border-radius: 12px; min-width: 44px; height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; cursor: pointer; } .pagination-modern__item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); color: #fff; transform: translateY(-2px); } .pagination-modern__item--active { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .pagination-modern__dots { color: #475569; font-weight: 700; padding: 0 4px; } .pagination-modern__prev, .pagination-modern__next { padding: 0; width: 44px; } .pagination-modern__info { color: #94a3b8; font-weight: 700; padding: 0 12px; } .pagination a, .pagination .active, ul.pagination li a, ul.pagination li.active, ul.pagination li span { border-radius: 12px; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8; text-decoration: none; min-width: 44px; display: flex; align-items: center; justify-content: center; height: 44px; } .pagination a:hover, ul.pagination li a:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); color: #fff; transform: translateY(-2px); } .pagination .active, ul.pagination li.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .card__video-duration, .card__video-rating { position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 10; transition: all 0.3s ease; backdrop-filter: blur(4px); pointer-events: none; } .card__video-duration { top: 10px; right: 10px; } .card__video-rating { bottom: 10px; right: 10px; display: flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.9); } .card__video-rating .icons { width: 14px; height: 14px; fill: rgba(255, 255, 255, 0.7); transition: all 0.3s ease; } .card__video-rating.is-high { color: #fff; font-weight: 700; } .card__video-rating.is-high .icons { fill: var(--ok); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ok) 40%, transparent)); } .card__video:hover .card__video-duration, .card__video:hover .card__video-rating { opacity: 0; transform: translateY(5px); } .card__video:hover { border-color: var(--accent) !important; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100% ); } .card__video-screnshot { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; } .card__video-screnshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .card__video:hover .card__video-screnshot img { } .card__video-title { padding: 0; font-size: 0.85rem; line-height: 1.35; color: #e2e8f0; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 2.7rem; margin-bottom: 0; } /* Sidebar (Additional videos) */ .video-hero-grid .video__additional { display: flex; flex-direction: column; gap: 16px; width: 420px; flex-shrink: 0; } .video-hero-grid .video__additional .card__video { width: 100% !important; margin: 0 !important; } .video-hero-grid .video__additional .card__video-title { height: 2.6em !important; -webkit-line-clamp: 2; font-size: 0.85rem; line-height: 1.3; text-align: center; padding: 0.4rem 0 0; } .video-hero-grid .video__additional .card__video-time { font-size: 10px; padding: 2px 4px; bottom: 4px; right: 4px; } .video-hero-grid .video__additional .card__video-top { font-size: 9px; padding: 2px 4px; top: 4px; left: 4px; } /* Список категорий (Сетка в столбик) */ .categories-list ul { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; padding: 0 !important; list-style: none !important; } .categories-list li { width: 100% !important; margin: 0 !important; padding: 0 !important; } .categories-list a { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; border-radius: 10px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.25s ease !important; display: block !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } .categories-list a:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Адаптивность сетки категорий */ @media (max-width: 1200px) { .categories-list ul { grid-template-columns: repeat(4, 1fr) !important; } } @media (max-width: 900px) { .categories-list ul { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { .categories-list ul { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 400px) { .categories-list ul { grid-template-columns: 1fr !important; } } @media (max-width: 1090px) { .video__additional { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; } } .card__video-time { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; bottom: 10px; right: 10px; } .card__video-top { background: var(--accent); color: #000; border-radius: 8px; padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; top: 10px; left: 10px; bottom: auto !important; right: auto !important; } /* === Сетка карточек: крупнее карточки (меньше колонок) === */ .grid.card__video-clear { display: grid; gap: 0; grid-auto-rows: auto; grid-template-columns: repeat(var(--cards-cols, var(--cards-cols-xxl)), 1fr); } .row.row-cards { display: grid; grid-auto-rows: auto; gap: 0; margin-left: 0; margin-right: 0; grid-template-columns: repeat(var(--cards-cols, var(--cards-cols-xxl)), 1fr); } .row.row-cards > * { width: 100%; max-width: 100%; } /* ≥ 1440px — 5 колонок (было 6, сделаем крупнее) */ @media (min-width: 1440px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-xxl); } .row.row-cards { --cards-cols: var(--cards-cols-xxl); } } /* 1050–1439 — 4 колонки */ @media (min-width: 1050px) and (max-width: 1439px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-xl); } .row.row-cards { --cards-cols: var(--cards-cols-xl); } } /* 810–1049 — 3 колонки */ @media (min-width: 810px) and (max-width: 1049px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-lg); gap: 0; } .row.row-cards { --cards-cols: var(--cards-cols-lg); gap: 0; } } /* 520–809 — 2 колонки */ @media (min-width: 520px) and (max-width: 809px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-md); gap: 0; } .row.row-cards { --cards-cols: var(--cards-cols-md); gap: 0; } } /* ≤ 519 — 1 колонка */ @media (max-width: 519px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-sm); gap: 0; } .row.row-cards { --cards-cols: var(--cards-cols-sm); gap: 0; } } /* 11) Navigation Overrides */ .header__navigation ul li a, .header__navigation ul li span { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 18px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; display: flex; align-items: center; gap: 8px; } .header__navigation ul li a:hover, .header__navigation ul li span:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .header__navigation ul li a i, .header__navigation ul li span i { margin: 0; } /* 6) Category grid (columnar layout) */ .playlist-link a, .categories-link a, .categories-list a, .trands-link a, .playlists a { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; border-radius: 10px !important; display: block !important; padding: 8px 12px !important; line-height: 1.4 !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .playlist-link a:hover, .categories-link a:hover, .categories-list a:hover, .trands-link a:hover, .playlists a:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; color: #fff !important; transform: translateY(-1px); } .playlist-link a:focus-visible, .categories-link a:focus-visible, .categories-list a:focus-visible, .trands-link a:focus-visible, .playlists a:focus-visible { outline: 2px solid rgba(255, 255, 255, .25); outline-offset: 2px; } /* Компоновка списков: сетка */ .categories-list ul, .playlist-link ul, .trands-link, .playlists { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; list-style: none !important; padding: 0 !important; } @media (max-width: 1200px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: repeat(4, 1fr) !important; } } @media (max-width: 900px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 400px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: 1fr !important; } } /* — Специально для списка категорий на странице видео — */ /* Выравниваем надпись «Категории:» и чипы по одной линии, не затрагивая другие места. */ .video-page-categories { display: flex !important; flex-wrap: wrap; align-items: center; /* ключ к вертикальному выравниванию метки и чипов */ gap: 8px !important; } .video-page-categories > li { display: flex; /* чтобы содержимое каждого li также центрировалось */ align-items: center; } /* Легкая настройка первой метки «Категории:» */ .video-page-categories > li:first-child { margin-right: 2px; line-height: 1.4; /* синхронизируем с чипами */ font-weight: 600; /* можно убрать, если не нужно выделение */ } /* — Специально для списка плейлистов на странице видео — */ /* Выравниваем надпись «Плейлисты:» и чипы по одной линии, только для этого блока. */ .video-page-playlists { display: flex !important; flex-wrap: wrap; align-items: center; /* вертикальное выравнивание */ gap: 8px !important; } .video-page-playlists > li { display: flex; align-items: center; } .video-page-playlists > li:first-child { margin-right: 2px; line-height: 1.4; /* синхронизируем с чипами */ font-weight: 600; /* можно ослабить по желанию */ } /* Верхняя прокручиваемая лента playLists — без громоздкой анимации из базовой темы */ .playlists { animation: none !important; padding: 4px 0 8px; white-space: normal; overflow: visible; } /* 2) На страницах категорий вернуть «старый» компактный вид плейлистов (одна строка, скролл) */ .container > .playlists { display: block !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 2px 0 6px !important; } .container > .playlists a { display: inline-block !important; font-size: 14px !important; padding: .28rem .5rem !important; margin: 0 4px 0 0 !important; } /* === Компактные «пилюли» в верхней полосе категорий (как раньше, но в стиле modern) === */ /* Контейнер в шапке:
*/ /* Убираем любые внешние отступы/внутренние поля, которые создают ложные «красные» поля слева/справа */ .playlist-link.container__header.categories-list { padding-left: 0 !important; padding-right: 0 !important; /* компенсируем крайние внешние отступы у ссылок, чтобы не было «пустых» полей по краям */ } .playlist-link.container__header.categories-list ul { padding: 0 !important; justify-content: start !important; /* чтобы чипы не растягивались */ } .container__header.categories-list a { padding: .28rem .55rem !important; /* компактнее */ font-size: 14px !important; /* чуть меньше шрифт */ background: var(--surface-2) !important; display: block !important; border-color: #334155 !important; /* более выразительный контур в стиле темы */ margin: 0 2px 2px 0 !important; /* плотная укладка как раньше */ } /* лёгкое выделение при hover, под стиль modern (тонкая подсветка рамки) */ .container__header.categories-list a:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; } /* активная «пилюля», если нужно подсвечивать текущую */ .container__header.categories-list a.is-active { background: var(--accent) !important; color: #0b0c10 !important; border-color: var(--accent) !important; } /* компактнее интервалы между чипами в шапке */ .container__header.categories-list ul { gap: 0 !important; } /* убираем внешние отступы у li, чтобы не добавлялись лишние зазоры */ .categories-list li, .playlist-link li, .trands-link li { margin: 0 !important; padding: 0 !important; } /* Внешние интервалы оставляем как в базовой теме для всех, кроме верхнего блока */ /* 7) Video cards (Removed duplicate, settings moved to section 10) */ .card__video-time { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; bottom: 10px; right: 10px; } .card__video-top { background: var(--accent); color: #000; border-radius: 8px; padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; top: 10px; left: 10px; bottom: auto !important; right: auto !important; } /* 8) Buttons small */ .button__small { background: var(--surface-1); color: var(--color-text); border-color: var(--border-subtle); } .button__small:hover { border-color: var(--accent); } /* 10) Preview indicators */ .preview-indicator { position: relative; left: 0; right: 0; z-index: 10; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 4px 8px; } .preview-indicator.indicator--bottom { bottom: 0; } .preview-indicator.indicator--top { top: 0; } .preview-indicator.indicator--center { top: 50%; transform: translateY(-50%); padding: 4px 12px; } .preview-indicator.indicator--overlay-center { top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); padding: 0; } .preview-indicator.indicator--overlay-center .preview-progress { width: 60%; height: 4px; } .preview-indicator.indicator--overlay-center .preview-indicator--dots { justify-content: center; width: 60%; } .preview-indicator.indicator--top, .preview-indicator.indicator--bottom { padding: 0; } .preview-indicator.indicator--top.preview-indicator--dots, .preview-indicator.indicator--bottom.preview-indicator--dots { padding: 4px 8px; height: 14px; background: rgba(0,0,0,0.1); } .preview-indicator.indicator--top .preview-progress, .preview-indicator.indicator--bottom .preview-progress { border-radius: 0; } .preview-indicator .preview-progress { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; overflow: hidden; position: relative; } .preview-indicator .preview-progress > i { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; } .preview-indicator.preview-indicator--dots { gap: 4px; } .preview-indicator .preview-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: all 0.2s; } .preview-indicator .preview-dot.is-active { background: var(--accent); transform: scale(1.2); opacity: 1; } .preview-indicator.theme--dark .preview-progress { background: rgba(0, 0, 0, 0.4); } .preview-indicator.theme--light .preview-progress { background: rgba(255, 255, 255, 0.4); } .preview-indicator.theme--dark .preview-dot { background: rgba(0, 0, 0, 0.3); } .preview-indicator.theme--light .preview-dot { background: rgba(255, 255, 255, 0.3); } /* 11) Similar videos header */ .similar__videos span { border-color: var(--border-subtle); } /* 12) Pagination (str function outputs ) */ a.str, .str a { background: var(--surface-1); color: var(--color-text); border: 1px solid var(--border-subtle); border-radius: .4rem; padding: .35rem .6rem; } a.str:hover, .str a:hover { background: var(--surface-2); } /* 12.1) Пагинация старого генератора (