/** * mini-card-style.css * Стили карточек и модалок — перенесено из IIFE в mini-channels.js * Подключать в ПОСЛЕ mini-style.css */ /* ── cdm-styled: внешний контейнер — держит фон, никогда не скроллится ── */ .cdm-styled { background-size: cover !important; background-position: center !important; position: relative; overflow: hidden; /* Принудительный GPU-слой — фон не перерисовывается во время анимации opacity/transform */ transform: translateZ(0); } /* Градиент — абсолютный слой inset:0, всегда покрывает 100% видимой области. Привязан к overflow:hidden родителю — никуда не уезжает при скролле контента. */ .cdm-styled::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.88) 100% ); pointer-events: none; z-index: 1; border-radius: inherit; } /* Внутренний скролл-контейнер — поверх градиента */ .cdm-scroll-inner { position: relative; z-index: 2; } .cdm-styled .cdm-glass-bg, .cdm-styled .cdm-glass-overlay { display: none !important; } .my-ch-card--styled { background-size:cover !important; background-position:center !important; position:relative; overflow:hidden; } .my-ch-card--styled::before { content:''; position:absolute; inset:0; background:rgba(5,10,20,0.55); pointer-events:none; z-index:0; } .my-ch-card--styled > * { position:relative; z-index:1; } .cdm-content { padding: 0 !important; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px !important; background: linear-gradient(160deg,#0d1520 0%,#111a2e 100%) !important; border: 1px solid rgba(0,212,255,0.12) !important; } /* Внешний контейнер НЕ скроллится — держит фон и ::before градиент */ .cdm-glass { max-height: 85vh; overflow: hidden !important; display: flex; flex-direction: column; position: relative; } /* Внутренний контейнер скроллится — контент идёт под неподвижным абсолютным градиентом */ .cdm-scroll-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; position: relative; z-index: 2; } .cdm-header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; } .cdm-avatar-wrap { width: 52px; height: 52px; min-width: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 24px; background-size: cover; background-position: center; } .cdm-header-info { flex: 1; min-width: 0; } .cdm-name { font-family: 'Orbitron',sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.5px; line-height: 1.3; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cdm-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 6px; } .cdm-badges { display: flex; flex-wrap: wrap; gap: 4px; } .cdm-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } .cdm-badge.pixel { background: rgba(0,212,255,0.12); color: #00d4ff; border: 1px solid rgba(0,212,255,0.2); } .cdm-badge.verified { background: rgba(0,255,136,0.12); color: #00ff88; border: 1px solid rgba(0,255,136,0.2); } .cdm-badge.lang { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); } .cdm-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.5); width: 28px; height: 28px; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; } .cdm-close:active { background: rgba(255,255,255,0.12); } .cdm-rating-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; } .cdm-rating { font-size: 15px; color: #FFB800; font-weight: 700; } .cdm-rating.frozen { color: #64b5f6; font-size: 13px; } .cdm-reviews-count { font-size: 11px; color: rgba(255,255,255,0.35); } .cdm-category { display: flex; align-items: center; gap: 6px; padding: 10px 16px 0; } .cdm-cat-icon { font-size: 16px; } .cdm-cat-name { font-size: 12px; font-weight: 600; color: rgba(0,212,255,0.8); text-transform: uppercase; letter-spacing: 0.8px; } .cdm-description { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.7); padding: 10px 16px 0; word-break: break-word; } .cdm-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 16px 0; } .cdm-tag { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.08); } .cdm-section-label { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,0.25); padding: 14px 16px 6px; text-transform: uppercase; } .cdm-socials { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 14px; } .cdm-social-btn { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); text-decoration: none; color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 600; } .cdm-social-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cdm-social-icon svg { width: 16px; height: 16px; } .cdm-social-label { font-size: 11px; } .cdm-actions { display: flex; gap: 7px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; } .cdm-btn { flex: 1; min-width: 80px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 11px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; } .cdm-btn-primary { background: linear-gradient(135deg,#0088cc,#00aaff); color: #fff; box-shadow: 0 4px 14px rgba(0,136,204,0.3); } .cdm-btn-secondary { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); } .cdm-btn-map { background: rgba(0,255,136,0.08); color: #00ff88; border: 1px solid rgba(0,255,136,0.18); flex: 0 0 auto; } .cdm-reviews-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; background: none; border: none; border-top: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); font-size: 13px; cursor: pointer; } .cdm-reviews-arrow { color: rgba(0,212,255,0.5); } /* ─── Share link block ─────────────────────────── */ .cdm-share-block { margin: 12px 0 8px; padding: 12px 14px; background: rgba(0,255,136,0.05); border: 1px solid rgba(0,255,136,0.15); border-radius: 12px; } .cdm-share-label { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; color: rgba(0,255,136,0.6); text-transform: uppercase; margin-bottom: 8px; } .cdm-share-row { display: flex; align-items: center; gap: 8px; } .cdm-share-url { flex: 1; font-size: 11px; color: rgba(255,255,255,0.45); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cdm-share-copy { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(0,255,136,0.3); background: rgba(0,255,136,0.08); color: #00ff88; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .cdm-share-copy:active { transform: scale(0.96); } .cdm-share-copy-done { background: rgba(0,255,136,0.2) !important; border-color: rgba(0,255,136,0.5) !important; } /* ─── Channel Editor scroll ────────────────────── */ .ced-content { max-height: 90vh; height: 90vh; display: flex; flex-direction: column; padding: 0 !important; overflow: hidden !important; } .ced-scroll { flex: 1 1 0; min-height: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-y: contain; padding-bottom: 80px; } .ced-scroll::-webkit-scrollbar { width: 3px; } .ced-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } /* ─── Channel Editor ───────────────────────────────── */ .ced-content { max-height:90vh; height:90vh; display:flex; flex-direction:column; padding:0 !important; overflow:hidden !important; } .ced-scroll { flex:1 1 0; min-height:0; overflow-y:scroll; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior-y:contain; padding:8px 0 80px; } .ced-acc { border-bottom:1px solid rgba(255,255,255,0.06); } .ced-acc-head { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; cursor:pointer; font-size:13px; font-weight:600; color:rgba(255,255,255,0.85); user-select:none; -webkit-user-select:none; } .ced-acc-head:active { background:rgba(255,255,255,0.03); } .ced-acc-arrow { font-size:20px; color:rgba(255,255,255,0.3); transition:transform 0.2s; line-height:1; display:inline-block; } .ced-acc.open .ced-acc-arrow { transform:rotate(90deg); } .ced-acc-body { display:none; padding:0 16px 14px; } .ced-acc.open .ced-acc-body { display:block; } .ced-textarea { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:#fff; font-size:13px; padding:10px 12px; resize:none; font-family:inherit; box-sizing:border-box; } .ced-input { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:#fff; font-size:12px; padding:8px 10px; font-family:inherit; box-sizing:border-box; } .ced-chips { display:flex; flex-wrap:wrap; gap:6px; } .ced-chip { font-size:11px; padding:5px 10px; border-radius:20px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.6); cursor:pointer; transition:all 0.15s; } .ced-chip.active { background:rgba(0,212,255,0.15); border-color:rgba(0,212,255,0.5); color:#00d4ff; } .ced-social-grid { display:flex; flex-direction:column; gap:10px; } .ced-social-row { display:flex; align-items:flex-start; gap:10px; } .ced-social-ico { font-size:18px; width:28px; text-align:center; flex-shrink:0; padding-top:6px; } .ced-social-info { flex:1; display:flex; flex-direction:column; gap:3px; } .ced-social-label { font-size:10px; color:rgba(255,255,255,0.35); font-weight:600; letter-spacing:0.5px; } .ced-style-btn { width:100%; display:flex; align-items:center; gap:12px; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:#fff; font-size:13px; cursor:pointer; } .ced-style-btn-preview { width:36px; height:36px; border-radius:8px; flex-shrink:0; background:#1a2332; } .ced-style-btn-arrow { margin-left:auto; color:rgba(255,255,255,0.3); } .ced-actions { display:flex; gap:8px; padding:16px; } /* ─── Card Style Modal ─────────────────────────────── */ .csm-content { max-height:90vh; overflow-y:scroll; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior-y:contain; padding:16px !important; } .csm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .csm-title { font-size:16px; font-weight:700; } .csm-section-label { font-size:9px; font-weight:800; letter-spacing:1.5px; color:rgba(255,255,255,0.35); text-transform:uppercase; margin-bottom:8px; } .csm-previews { display:flex; gap:10px; margin-bottom:14px; } .csm-preview-block { flex:1; } .csm-preview-label { font-size:9px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,0.3); text-transform:uppercase; margin-bottom:6px; } .csm-mini-card { position:relative; height:72px; border-radius:12px; overflow:hidden; background:#1a2332; } .csm-mini-bg { position:absolute; width:200%; height:200%; background-size:cover; background-repeat:no-repeat; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; display:none; } .csm-mini-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(10,15,25,0.7) 100%); pointer-events:none; } .csm-mini-content { position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding:10px; height:100%; box-sizing:border-box; } .csm-mini-avatar { width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; } .csm-mini-name { font-size:12px; font-weight:700; color:#fff; margin-bottom:2px; } .csm-mini-sub { font-size:10px; color:rgba(255,255,255,0.5); } .csm-full-card { position:relative; height:160px; border-radius:12px; overflow:hidden; background:#1a2332; cursor:grab; flex-shrink:0; } .csm-full-bg { position:absolute; width:200%; height:200%; background-size:cover; background-repeat:no-repeat; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; display:none; } .csm-full-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(10,15,25,0.85) 100%); pointer-events:none; } .csm-full-content { position:relative; z-index:1; padding:14px 12px; overflow:hidden; } .csm-full-avatar { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:6px; overflow:hidden; } .csm-full-name { font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .csm-full-desc { display:none; } /* убрано из превью — растягивало карточку */ .csm-gesture-hint { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.7); border-radius:20px; padding:4px 10px; font-size:10px; color:rgba(255,255,255,0.7); white-space:nowrap; pointer-events:none; z-index:10; } .csm-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; } .csm-preset { width:70px; height:44px; border-radius:10px; border:2px solid transparent; cursor:pointer; display:flex; align-items:flex-end; padding:4px; transition:all 0.15s; flex-shrink:0; } .csm-preset.active { border-width:2px; transform:scale(1.05); } .csm-preset-label { font-size:8px; font-weight:700; color:rgba(255,255,255,0.85); text-shadow:0 1px 3px rgba(0,0,0,0.8); line-height:1; } .csm-upload-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center; } .csm-reset-pos { font-size:11px; padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.6); cursor:pointer; } .csm-gesture-tip { font-size:10px; color:rgba(255,255,255,0.4); margin-bottom:8px; line-height:1.5; } .csm-save-btn { width:100%; padding:14px; background:linear-gradient(135deg,#00d4ff,#0088cc); color:#fff; font-size:14px; font-weight:700; border:none; border-radius:12px; cursor:pointer; margin-top:14px; } .cse-accent-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cse-accent-val { font-size:11px; font-family:monospace; color:rgba(255,255,255,0.5); } .cse-accent-presets { display:flex; gap:6px; flex-wrap:wrap; } .cse-accent-dot { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,0.1); transition:transform 0.1s; } .cdm-btn-edit { background:linear-gradient(135deg,#1a4a2e,#0d6b3a); color:#00ff88; border:1px solid rgba(0,255,136,0.3); } .cdm-btn-claim { background:rgba(255,200,0,0.1); color:#ffc800; border:1px solid rgba(255,200,0,0.3); } /* ch-card custom style support */ .ch-card { position:relative; } .ch-card--styled { background-size:cover !important; background-position:center !important; position:relative; } .ch-card--styled .ch-card-top, .ch-card--styled .ch-card-desc, .ch-card--styled .ch-card-tags, .ch-card--styled .ch-card-actions { position:relative; z-index:1; } .ch-card--styled .ch-card-name { text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7); color:#fff !important; } .ch-card--styled .ch-card-desc { text-shadow: 0 1px 3px rgba(0,0,0,0.8); color:rgba(255,255,255,0.85) !important; } .ch-card--styled .ch-card-tag { background:rgba(0,0,0,0.45) !important; border-color:rgba(255,255,255,0.2) !important; color:rgba(255,255,255,0.85) !important; } /* ── Avatar fix: непрозрачный фоллбэк, чтобы градиент кольца не просвечивал ── */ .cdm-glass-avatar { background: #12192a; } .cdm-glass-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* ══════════════════════════════════════════════════════════════ СВЕЧЕНИЕ — ФИНАЛЬНАЯ GPU-SAFE АРХИТЕКТУРА Правило: на мобиле анимировать можно ТОЛЬКО opacity и transform. box-shadow (даже на sibling-элементе) инвалидирует соседние compositor-слои → мерцание при GSAP-тилте. .cdm-inner-glow — абсолютный div внутри overflow:hidden карточки. Статичный filter:blur (вычислен один раз) + пульсирующий opacity (GPU-compositable, zero paint) → никакого мерцания. ══════════════════════════════════════════════════════════════ */ /* ── Внутреннее свечение карточки ──────────────────────────────────────────── */ .cdm-inner-glow { position: absolute; inset: 0; border-radius: inherit; background: rgba(var(--glow-rgb, 106,179,242), 0.55); /* blur статичный — GPU кешируется, не пересчитывается каждый кадр */ filter: blur(38px); opacity: calc(var(--glow-intensity, 0.4) * 0.22); will-change: opacity; pointer-events: none; z-index: 0; /* за ::before (z:1) и контентом (z:2) */ animation: cdm-inner-glow-pulse 4s ease-in-out infinite; } @keyframes cdm-inner-glow-pulse { 0%, 100% { opacity: calc(var(--glow-intensity, 0.4) * 0.18); } 50% { opacity: calc(var(--glow-intensity, 0.4) * 0.52); } } /* ── Свечение аватарки — ::after с opacity-анимацией ───────────────────────── */ .cdm-styled .cdm-glass-avatar-ring { position: relative; overflow: visible; box-shadow: none !important; } .cdm-styled .cdm-glass-avatar-ring::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: rgba(var(--glow-rgb, 106,179,242), 0.65); filter: blur(10px); opacity: calc(var(--glow-intensity, 0.4) * 0.38); will-change: opacity; animation: cdm-inner-glow-pulse 4s ease-in-out infinite; animation-delay: 0.8s; z-index: -1; pointer-events: none; } /* Системная настройка "без анимаций" */ @media (prefers-reduced-motion: reduce) { .cdm-inner-glow, .cdm-styled .cdm-glass-avatar-ring::after { animation: none; } } /* ── Тоггл 3D / внешнее свечение ────────────────────────────────────────── */ .csm-tilt-toggle-wrap { display: flex; gap: 8px; margin-bottom: 8px; } .csm-tilt-opt { flex: 1; padding: 9px 10px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; text-align: center; } .csm-tilt-opt.active { border-color: rgba(0,212,255,0.5); background: rgba(0,212,255,0.12); color: #00d4ff; } .csm-tilt-warning { display: flex; align-items: flex-start; gap: 6px; padding: 9px 12px; border-radius: 10px; background: rgba(255,200,0,0.07); border: 1px solid rgba(255,200,0,0.2); color: rgba(255,200,0,0.85); font-size: 11px; line-height: 1.5; margin-bottom: 4px; } /* ── Внешнее свечение карточки (режим без тилта) ──────────────────────────── */ /* box-shadow safe — нет конкурирующего GSAP transform на этом элементе */ @keyframes cdm-external-glow-pulse { 0%, 100% { box-shadow: 0 0 24px 7px rgba(var(--glow-rgb, 106,179,242), calc(var(--glow-intensity, 0.4) * 0.50)), 0 0 80px 20px rgba(var(--glow-rgb, 106,179,242), calc(var(--glow-intensity, 0.4) * 0.14)); } 50% { box-shadow: 0 0 44px 14px rgba(var(--glow-rgb, 106,179,242), calc(var(--glow-intensity, 0.4) * 0.85)), 0 0 120px 32px rgba(var(--glow-rgb, 106,179,242), calc(var(--glow-intensity, 0.4) * 0.24)); } } .cdm-external-glow { animation: cdm-external-glow-pulse 4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cdm-external-glow { animation: none; } } /* ── Задизейбленная секция (цвет свечения в 3D-режиме) ───────────────────── */ .csm-section-disabled { opacity: 0.35; pointer-events: none; user-select: none; -webkit-user-select: none; transition: opacity 0.2s; }