/* ============================================================ NG Forum — Liquid Glass UI (тёмная премиальная тема) Единая дизайн-система через CSS-переменные. Шапку (.siteHeader) не трогаем. ============================================================ */ /* ── Красиві шрифти для постів (self-hosted, кирилиця+латиниця; [font=...]) ── */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/caveat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/caveat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lobster-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lobster-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pacifico-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pacifico-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* базовый фон */ --ng-bg: #0a0e18; --ng-bg2: #0d1424; /* «мокрое стекло» — заметная полупрозрачность */ --glass-bg: rgba(17,24,41,.40); --glass-bg-soft: rgba(255,255,255,.07); --glass-bg-strong: rgba(13,19,33,.58); --glass-border: rgba(255,255,255,.18); --glass-border2: rgba(255,255,255,.26); --glass-hi: rgba(255,255,255,.20); --ng-blur: 30px; /* алиасы под старые имена карточек */ --ng-card: var(--glass-bg); --ng-card2: var(--glass-bg-strong); --ng-card3: var(--glass-bg-soft); /* акцент — бренд-тиффани (как в шапке) */ --ng-teal: #44ebe1; --ng-teal2: #8ff6ee; --ng-blue: #79aef2; --ng-orange: #ffb15a; --ng-green: #57d99b; --ng-red: #ff6f6f; --ng-purple: #b6a1ff; --ng-gold: #ffcf76; --accent-soft: rgba(68,235,225,.10); --accent-mid: rgba(68,235,225,.16); --accent-ring: rgba(68,235,225,.32); --accent-glow: rgba(68,235,225,.22); /* текст */ --ng-text: #eaf1f8; --ng-text2: #a6b6c9; --ng-text3: #72849a; /* линии */ --ng-line: rgba(255,255,255,.07); --ng-line2: rgba(255,255,255,.12); /* радиусы */ --ng-radius: 18px; --ng-rsm: 12px; --ng-rxs: 9px; --r-pill: 999px; /* тени */ --shadow-1: 0 8px 30px rgba(2,6,12,.35); --shadow-2: 0 24px 64px rgba(2,6,12,.55); --ng-shadow: var(--shadow-1); /* мягкое бирюзовое свечение (как у логотипа/шапки) */ --glow: 0 0 30px rgba(68,235,225,.13), 0 0 70px rgba(68,235,225,.05); --glow-strong: 0 0 34px rgba(68,235,225,.22), 0 0 80px rgba(68,235,225,.08); --ng-maxw: 1240px; --ease: cubic-bezier(.4,0,.2,1); --ng-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ng-font); font-size: 15px; line-height: 1.6; color: var(--ng-text); /* Фон — как на сайте ng-gta5.com: затемнённый background.webp, вертикальный повтор */ background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url(../img/site/background.webp?v=1) center top / 100% auto repeat-y #020202; min-height: 100vh; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Орбы «жидкого стекла» отключены — фон берём с сайта (см. body выше) */ body::before { content: none; } @keyframes ngAurora { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.1); } } a { color: var(--ng-teal); text-decoration: none; transition: color .18s var(--ease); } a:hover { color: var(--ng-teal2); } img { max-width: 100%; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 10px; } .text-muted { color: var(--ng-text3); } .inline { display: inline; } [hidden] { display: none !important; } ::selection { background: rgba(68,235,225,.26); color: #fff; } .icon { flex-shrink: 0; vertical-align: middle; } .ng-shell { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; } /* ── Мобільні guard'и проти горизонтального переповнення ("съезжает/не влазит") ── overflow-x:clip на .ng-shell не підтримується на старих iOS<16/Android WebView → там з'являвся горизонтальний скрол. body тут sticky-safe (max-width без overflow, щоб не зламати position:sticky сайдбару). Головне — не даємо JS-попапам редактора (left задає JS по кнопці) вилазити за правий край на вузькому екрані. */ html, body { max-width: 100%; } .emojiPanel, .editorPop, .editorPop--size, .editorPop--font, .mentionMenu, .reactPicker { max-width: calc(100vw - 16px); } @media (max-width: 640px) { .emojiPanel, .editorPop, .editorPop--size, .editorPop--font { left: 50% !important; right: auto !important; transform: translateX(-50%); max-width: 94vw; } img, video, iframe, table, pre { max-width: 100%; } } /* Скроллбар — тонкий, стеклянный */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(68,235,225,.32); background-clip: content-box; } /* ============================================================ МАКЕТ КОНТЕНТА ============================================================ */ .p-body { flex: 1; padding: 22px 0 52px; } .p-body-inner { max-width: var(--ng-maxw); margin: 0 auto; padding: 0 20px; } .p-body-main { display: block; } .p-body-main--sidebar { display: grid; grid-template-columns: minmax(0,1fr) 304px; gap: 22px; align-items: start; } .p-body-content { min-width: 0; } .p-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; } /* Заголовок страницы */ .p-body-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 4px 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ng-line); } .p-title-value { font-size: 25px; font-weight: 700; color: #f2f8ff; letter-spacing: -.02em; line-height: 1.15; } .p-description { color: var(--ng-text2); font-size: 13px; margin-top: 7px; } .p-description .username { color: var(--ng-teal); } .p-title-action { display: flex; gap: 8px; flex-shrink: 0; } /* Хлебные крошки — «таблетка» из стекла */ .p-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 16px; padding: 9px 16px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--r-pill); font-size: 12.5px; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-hi); } .p-breadcrumbs-item { color: var(--ng-text2); display: inline-flex; align-items: center; } .p-breadcrumbs-home { color: var(--ng-text3); } .p-breadcrumbs-item + .p-breadcrumbs-item::before { content: '›'; color: rgba(255,255,255,.25); margin: 0 8px; font-size: 14px; } .p-breadcrumbs-item.is-current { color: #dfeaf6; font-weight: 600; } a.p-breadcrumbs-item:hover { color: var(--ng-teal); } /* ============================================================ СТЕКЛЯННЫЕ ПАНЕЛИ (БЛОКИ) ============================================================ */ .block { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%), var(--glass-bg); -webkit-backdrop-filter: blur(var(--ng-blur)) saturate(190%); backdrop-filter: blur(var(--ng-blur)) saturate(190%); border: 1px solid var(--glass-border); border-radius: var(--ng-radius); box-shadow: var(--shadow-1), var(--glow), inset 0 1px 0 var(--glass-hi), inset 0 -18px 40px rgba(0,0,0,.10); overflow: hidden; margin-bottom: 18px; transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } .block:hover { box-shadow: var(--shadow-1), var(--glow-strong), inset 0 1px 0 var(--glass-hi), inset 0 -18px 40px rgba(0,0,0,.10); border-color: rgba(68,235,225,.28); } .block-title, .block-header { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 18px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfe0f2; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--ng-line); } .block-header a { color: #eaf2fb; font-weight: 700; letter-spacing: .08em; transition: color .18s var(--ease); } .block-header a:hover { color: var(--ng-teal); } .block-collapse { background: none; border: none; color: var(--ng-text3); cursor: pointer; display: flex; padding: 4px; border-radius: 8px; transition: transform .25s var(--ease), color .2s, background .2s; } .block-collapse:hover { color: var(--ng-teal); background: var(--accent-soft); } .block.is-collapsed .block-collapse { transform: rotate(180deg); } .block.is-collapsed .block-body { display: none; } .block-body { padding: 16px 18px; } .block-body--nodes, .block-body--rows { padding: 6px; } .block-sidebar .block-body, .p-sidebar .block-body { padding: 12px 14px; } .block-empty { padding: 44px 20px; text-align: center; color: var(--ng-text3); display: flex; flex-direction: column; align-items: center; gap: 12px; } .block-empty .icon { color: rgba(68,235,225,.3); } .block-rowMessage { padding: 16px 18px; color: var(--ng-text2); font-size: 13px; } .block-filterBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 16px; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--ng-line); } .block-filterBar-info { font-size: 12px; color: var(--ng-text2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .p-sidebar .block-title { font-size: 10.5px; color: var(--ng-text3); letter-spacing: .14em; } /* ============================================================ NODE (форумы на главной) ============================================================ */ .block-body--nodes .node { border-radius: 12px; } .node { position: relative; transition: background .18s var(--ease); } .node:hover { background: rgba(255,255,255,.035); } /* Уся строка розділу клікабельна: cover-посилання розтягнуте на весь .node, а внутрішні посилання (підрозділи, останній допис) лишаються клікабельними поверх. */ .node-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .node-body { position: relative; } .node-title, .node-description, .node-stats, .node-latest { cursor: pointer; } .node-title a, .node-subforums a, .node-latest-title, .node-latest a { position: relative; z-index: 2; } .node-body { display: grid; grid-template-columns: 48px minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 14px 14px; min-height: 62px; } .node-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--ng-teal); background: var(--accent-soft); border: 1px solid rgba(68,235,225,.16); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: all .22s var(--ease); } .node:hover .node-icon { background: var(--accent-mid); border-color: rgba(68,235,225,.34); transform: translateY(-1px); } .node-main { min-width: 0; } .node-title { margin: 0 0 3px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .node-roleTag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; } .node-roleTag--admin { color: #ffca28; background: rgba(255,202,40,.13); border: 1px solid rgba(255,202,40,.28); } .node-roleTag--media { color: #ff8ad6; background: rgba(255,138,214,.12); border: 1px solid rgba(255,138,214,.28); } .node-title a { color: #e6f0fb; font-weight: 700; } .node-title a:hover { color: var(--ng-teal); } .node-description { font-size: 12px; color: var(--ng-text3); } .node-subforums { font-size: 11.5px; color: var(--ng-text3); margin-top: 4px; } .node-subforums a { color: var(--ng-text2); } .node-subforums a:hover { color: var(--ng-teal); } /* Компактні лічильники розділу: без «коробок» — два дрібні рядки праворуч (число + підпис в одну лінію) */ .node-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; min-width: 84px; } .node-stat { display: flex; align-items: baseline; gap: 5px; } .node-stat b { font-size: 13px; font-weight: 700; color: var(--ng-teal); line-height: 1.35; } .node-stat span { font-size: 11px; color: var(--ng-text3); } .node-stats--private { color: var(--ng-text3); font-size: 12px; align-items: center; gap: 6px; } .node-latest { display: flex; align-items: center; gap: 10px; width: 190px; max-width: 190px; flex-shrink: 0; } .node-latest-main { min-width: 0; } .node-latest-title { display: block; font-size: 12.5px; color: #dbe8f6; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .node-latest-title:hover { color: var(--ng-teal); } .node-latest-meta { font-size: 11px; color: var(--ng-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .node-latest-empty { font-size: 12px; color: var(--ng-text3); } /* ============================================================ STRUCTITEM (список тем) ============================================================ */ .structItem { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px; transition: background .16s var(--ease); } .structItem + .structItem { position: relative; } .structItem + .structItem::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--ng-line); } .structItem:hover { background: rgba(255,255,255,.035); } .structItem.is-pinned { background: var(--accent-soft); } .structItem-icon { display: flex; align-items: center; justify-content: center; color: var(--ng-teal); } .structItem-icon .is-pinned { color: var(--ng-orange); } .structItem-main { min-width: 0; } .structItem-title { font-size: 14.5px; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .structItem-title a { color: #e6f0fb; font-weight: 600; } .structItem-title a:hover { color: var(--ng-teal); } .structItem-tag { color: var(--ng-text3); display: inline-flex; } .structItem-minor { font-size: 12px; color: var(--ng-text3); display: flex; align-items: center; gap: 6px; } .structItem-minor .username { color: var(--ng-text2); } .structItem-minor .username:hover { color: var(--ng-teal); } .structItem-dot { opacity: .5; } .structItem-meta { display: flex; gap: 18px; flex-shrink: 0; } .structItem-metaPair { display: flex; flex-direction: column; align-items: center; } .structItem-metaPair b { font-size: 15px; color: var(--ng-text); font-weight: 700; } .structItem-metaPair span { font-size: 8px; color: var(--ng-text3); text-transform: uppercase; letter-spacing: .06em; } .structItem-latest { width: 150px; max-width: 150px; flex-shrink: 0; text-align: right; } .structItem-latestDate { display: block; font-size: 12px; color: var(--ng-text2); } .structItem-latestUser { display: block; font-size: 11px; color: var(--ng-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Клікабельний увесь рядок теми (stretched-link): тема відкривається кліком по всій картці, а не лише по назві. Вкладені посилання (автор, останнє повідомлення, кнопки модерації) лишаються активними завдяки вищому z-index. */ .structItem { position: relative; cursor: pointer; } .structItem-title > a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .structItem-minor a, .structItem-meta a, .structItem-latest a, .structItem-latest form, .structItem-latest button { position: relative; z-index: 2; } /* ============================================================ ПРЕФИКСЫ ============================================================ */ .prefix { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; white-space: nowrap; border: 1px solid transparent; } .prefix--teal { background: rgba(68,235,225,.13); color: var(--ng-teal); border-color: rgba(68,235,225,.22); } .prefix--blue { background: rgba(121,174,242,.15); color: #9cc4f5; border-color: rgba(121,174,242,.24); } .prefix--orange { background: rgba(255,177,90,.15); color: var(--ng-gold); border-color: rgba(255,177,90,.24); } .prefix--green { background: rgba(87,217,155,.15); color: #7ee4b3; border-color: rgba(87,217,155,.24); } .prefix--red { background: rgba(255,111,111,.15); color: #ff9a9a; border-color: rgba(255,111,111,.24); } .prefix--gray { background: rgba(160,178,204,.14); color: #b3c3d6; border-color: rgba(160,178,204,.2); } .prefix--purple { background: rgba(182,161,255,.15); color: #c6b4ff; border-color: rgba(182,161,255,.24); } /* ── Звання: кольорові бейджі (стекуються) ─────────────────── */ .rankBadges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 5px; } .rankBadges--center { justify-content: center; } .message-user .rankBadges, .message-user .userGroups { justify-content: center; } .rankBadge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 800; font-size: 11px; line-height: 1.7; letter-spacing: .01em; white-space: nowrap; color: var(--rc, #9aa4b2); background: color-mix(in srgb, var(--rc, #9aa4b2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rc, #9aa4b2) 42%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--rc, #9aa4b2) 20%, transparent); } .rankBadge--sm { padding: 0 7px; font-size: 10px; } /* ── Ігрові належності: фракція / сім'я ────────────────────── */ .userGroups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .userGroups--profile { margin-top: 8px; } .groupChip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--ng-text2, #b3c3d6); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); } .groupChip svg { opacity: .85; flex: 0 0 auto; } .groupChip--faction { color: #9cc4f5; border-color: rgba(121,174,242,.22); background: rgba(121,174,242,.08); } .groupChip--family { color: #c6b4ff; border-color: rgba(182,161,255,.22); background: rgba(182,161,255,.08); } .groupChip.is-lead { font-weight: 800; border-color: color-mix(in srgb, currentColor 45%, transparent); box-shadow: 0 0 11px color-mix(in srgb, currentColor 30%, transparent); } /* ============================================================ СООБЩЕНИЯ (стекло без тяжёлого blur — их много на странице) ============================================================ */ .block--messages { background: none; border: none; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; } .message { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); border: 1px solid var(--glass-border); border-radius: var(--ng-radius); margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-1), var(--glow), inset 0 1px 0 var(--glass-hi); scroll-margin-top: 80px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .message:hover { box-shadow: var(--shadow-1), var(--glow-strong), inset 0 1px 0 var(--glass-hi); } .message:target { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft), var(--glow-strong), var(--shadow-1); } .message-inner { display: flex; } .message-user { width: 176px; flex-shrink: 0; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; background: rgba(255,255,255,.025); border-right: 1px solid var(--ng-line); } .message-name { font-size: 13.5px; font-weight: 700; color: var(--ng-text); margin-top: 11px; } .message-name:hover { color: var(--ng-teal); } .message-userTitle { font-size: 10px; font-weight: 700; color: var(--ng-text3); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } .message-userStats { margin-top: 13px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ng-text3); } .message-userStats b { color: var(--ng-text2); } .message-userJoined { margin-top: 4px; opacity: .8; } .message-userMeta { display: contents; } .message-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .message-attribution { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--ng-line); } .message-date { font-size: 12px; color: var(--ng-text3); } .message-date:hover { color: var(--ng-teal); } .message-num { font-size: 12px; color: var(--ng-text3); font-weight: 700; } .message-body { padding: 18px 20px; font-size: 14.5px; line-height: 1.75; flex: 1; } .message-edited { padding: 0 20px 12px; font-size: 11px; color: var(--ng-text3); font-style: italic; } .message-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 20px; border-top: 1px solid var(--ng-line); } .message-reactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .reactBtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--ng-text2); font: inherit; font-size: 12px; cursor: pointer; transition: all .18s var(--ease); } .reactBtn:hover { background: var(--accent-soft); color: var(--ng-teal); border-color: var(--accent-ring); transform: translateY(-1px); } .reactBtn.is-liked { background: var(--accent-mid); color: var(--ng-teal); border-color: var(--accent-ring); } .reactBtn.is-static { cursor: default; } .reactBtn.is-static:hover { transform: none; } .reactBtn-count { font-weight: 700; } /* ── Реакції-емодзі ────────────────────────────────────────────── */ .reactChips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .reactChip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--ng-text2); font: inherit; font-size: 13px; cursor: pointer; transition: all .15s var(--ease); } .reactChip:hover { border-color: var(--accent-ring); transform: translateY(-1px); } .reactChip.is-mine { background: var(--accent-mid); border-color: var(--accent-ring); color: var(--ng-teal); } .reactChip[disabled] { cursor: default; } .reactChip[disabled]:hover { transform: none; } .reactChip-emoji { font-size: 14px; line-height: 1; } .reactChip-n { font-weight: 700; font-size: 12px; } .reactAdd { position: relative; display: inline-flex; } .reactPicker { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; display: flex; flex-wrap: wrap; max-width: 344px; gap: 4px; padding: 6px; border-radius: 14px; background: var(--ng-bg2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); } .reactPicker[hidden] { display: none; } /* Десктопний пікер, винесений у (щоб картка .message з overflow:hidden не обрізала його): координати ставить JS */ .reactPicker.is-portaled { position: fixed; bottom: auto; left: 0; top: 0; margin: 0; z-index: 210; } .reactPick { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; transition: background .12s, transform .12s; } .reactPick:hover { background: var(--accent-soft); transform: scale(1.15); } /* Реакції показуємо тими ж Apple-емодзі-зображеннями, що й у пікері/повідомленнях */ .reactChip-emoji { display: inline-flex; align-items: center; } .reactChip-emoji img.emoji { width: 16px; height: 16px; margin: 0; vertical-align: middle; } .reactPick img.emoji { width: 22px; height: 22px; margin: 0; vertical-align: middle; } .message-actions { display: flex; gap: 4px; flex-wrap: wrap; } .message-action { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--ng-rxs); background: none; border: none; color: var(--ng-text3); font: inherit; font-size: 12px; cursor: pointer; transition: all .16s var(--ease); } .message-action:hover { background: var(--accent-soft); color: var(--ng-teal); } .message-action--danger:hover { background: rgba(255,111,111,.12); color: var(--ng-red); } .message-actions form { margin: 0; } /* Модерация */ .modBar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; background: rgba(255,207,118,.06); border: 1px solid rgba(255,207,118,.18); border-radius: var(--ng-rsm); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .modBar-label { font-size: 12px; font-weight: 700; color: var(--ng-gold); text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 6px; } .modBar-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .modBar-move { align-items: center; } .modBar-move-label { font-size: 12px; font-weight: 600; color: var(--ng-teal); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .modBar-select { flex: 1 1 180px; max-width: 320px; padding: 6px 10px; font: inherit; font-size: 13px; line-height: 1.3; color: var(--ng-text, #e6ebf2); background: rgba(10,14,20,.55); border: 1px solid rgba(255,255,255,.16); border-radius: var(--ng-rsm); cursor: pointer; } .modBar-select:focus-visible { outline: 2px solid var(--ng-teal); outline-offset: 1px; } .modBar-select option { color: #111; background: #fff; } .modBar-err { font-size: 12px; font-weight: 600; color: #ff9a9a; display: inline-flex; align-items: center; gap: 5px; flex-basis: 100%; } .modBar-ok { font-size: 12px; font-weight: 600; color: #7fe0b0; display: inline-flex; align-items: center; gap: 5px; flex-basis: 100%; } .modBar-extend { align-items: center; gap: 6px; } .modBar-extend-lbl { font-size: 12px; font-weight: 600; color: #cfe0f2; display: inline-flex; align-items: center; gap: 5px; } .modBar-extend-unit { font-size: 12px; color: #8fa3b3; } .modBar-extend-hours { width: 60px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ng-line, #22304a); background: var(--ng-input-bg, #0b1220); color: inherit; font: inherit; font-size: 13px; text-align: center; } .modBar-extend-reason { min-width: 180px; flex: 1 1 200px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ng-line, #22304a); background: var(--ng-input-bg, #0b1220); color: inherit; font: inherit; font-size: 13px; } .modBar-extend-hours:focus-visible, .modBar-extend-reason:focus-visible { outline: 2px solid var(--ng-teal); outline-offset: 1px; } @media (max-width: 640px) { .modBar-extend { width: 100%; flex-wrap: wrap; } .modBar-extend-reason { flex-basis: 100%; } } /* ============================================================ BBCODE ============================================================ */ .bbWrapper p { margin-bottom: 4px; } /* компактніші відступи між абзацами в постах (глоб. p = 10px) */ .bbWrapper p:last-child { margin-bottom: 0; } .bbWrapper .bb-center, .bbWrapper .bb-left, .bbWrapper .bb-right, .bbWrapper .bb-justify { margin-bottom: 4px; } .bbWrapper .bb-center:last-child, .bbWrapper .bb-left:last-child, .bbWrapper .bb-right:last-child, .bbWrapper .bb-justify:last-child { margin-bottom: 0; } .bbWrapper a { text-decoration: underline; text-decoration-color: rgba(68,235,225,.4); text-underline-offset: 2px; } .bb-u { text-decoration: underline; } .bb-s { text-decoration: line-through; } .bb-center { text-align: center; } .bb-left { text-align: left; } .bb-right { text-align: right; } .bb-justify { text-align: justify; } .bb-img { border-radius: 12px; margin: 6px 0; max-height: 480px; max-width: 100%; width: auto; box-shadow: var(--shadow-1); } .bb-img[style*="width"] { max-height: none; } .bb-list { margin: 8px 0; padding-left: 22px; } .bb-list li { margin: 4px 0; } .bb-quote { margin: 12px 0; padding: 12px 16px; background: rgba(255,255,255,.03); border: 1px solid var(--ng-line); border-left: 3px solid var(--accent-ring); border-radius: 0 var(--ng-rsm) var(--ng-rsm) 0; } .bb-quote-head { font-size: 12px; font-weight: 700; color: var(--ng-teal); margin-bottom: 6px; } .bb-quote-body { color: var(--ng-text2); } .bb-code { margin: 10px 0; padding: 14px 16px; background: rgba(0,0,0,.28); border: 1px solid var(--ng-line); border-radius: var(--ng-rsm); overflow-x: auto; font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace; font-size: 13px; color: #dbe8f6; } .bb-code code { white-space: pre; } .bb-code { position: relative; } /* Тулбар блоку коду: мова + копіювати */ .bb-code-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -6px -6px 10px; } .bb-code-lang { margin-right: auto; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ng-teal); font-weight: 700; opacity: .85; } .bb-code-copy { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--ng-line); background: rgba(255,255,255,.05); color: var(--ng-text2); cursor: pointer; } .bb-code-copy:hover { color: var(--ng-teal); border-color: var(--ng-teal); } /* Легка підсвітка синтаксису */ .bb-code .hl-com { color: #6b8299; font-style: italic; } .bb-code .hl-str { color: #9ece6a; } .bb-code .hl-num { color: #ff9e64; } .bb-code .hl-kw { color: #7aa2f7; font-weight: 600; } /* Вкладки [tabs] */ .bb-tabs { margin: 12px 0; border: 1px solid var(--ng-line); border-radius: var(--ng-rsm); overflow: hidden; } .bb-tabs-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--ng-line); } .bb-tab-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border: none; border-radius: 9px 9px 0 0; background: none; color: var(--ng-text2); cursor: pointer; } .bb-tab-btn:hover { color: var(--ng-teal); } .bb-tab-btn.is-active { background: var(--accent-soft); color: var(--ng-teal); } .bb-tab-panel { display: none; padding: 14px 16px; } .bb-tab-panel.is-active { display: block; } /* Акордеон [accordion] */ .bb-accordion { margin: 12px 0; border: 1px solid var(--ng-line); border-radius: var(--ng-rsm); overflow: hidden; } .bb-acc-item + .bb-acc-item { border-top: 1px solid var(--ng-line); } .bb-acc-item > summary { padding: 11px 15px; background: rgba(255,255,255,.03); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ng-text2); user-select: none; } .bb-acc-item > summary:hover { color: var(--ng-teal); } .bb-acc-body { padding: 12px 15px; } /* Тултип «хто поставив реакцію» */ .reactTip { position: fixed; z-index: 10000; max-width: 280px; padding: 6px 10px; border-radius: 8px; background: rgba(15,20,28,.97); border: 1px solid var(--ng-line); color: var(--ng-text); font-size: 12px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.5); pointer-events: none; } .bb-spoiler { margin: 10px 0; border: 1px solid var(--ng-line); border-radius: var(--ng-rsm); overflow: hidden; } .bb-spoiler summary { padding: 10px 15px; background: rgba(255,255,255,.03); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ng-text2); user-select: none; } .bb-spoiler summary:hover { color: var(--ng-teal); } .bb-spoiler-body { padding: 12px 15px; } .bb-yt { display: block; max-width: 560px; margin: 12px 0; } .bb-yt-inner { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border2); } .bb-yt-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* Плитки-превʼю з голих посилань (картинки + YouTube) — невеликі квадратики (#медіа) */ .bb-media { display: inline-block; vertical-align: top; margin: 6px 8px 6px 0; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--glass-border2); box-shadow: var(--shadow-1); line-height: 0; background: var(--ng-bg2); transition: transform .15s var(--ease), filter .15s var(--ease); } .bb-media:hover { transform: translateY(-2px); filter: brightness(1.06); } .bb-media-thumb { display: block; } .bb-media-img .bb-media-thumb { max-width: min(100%, 280px); max-height: 200px; width: auto; height: auto; object-fit: cover; } .bb-media-yt { width: 240px; max-width: 100%; cursor: pointer; } .bb-media-yt .bb-media-thumb { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; } .bb-media-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background .15s var(--ease); } .bb-media-play::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; } .bb-media-yt:hover .bb-media-play { background: #f00; } /* Пікер емодзі в редакторі */ .js-emojiBtn { font-size: 16px; line-height: 1; } .emojiPanel { position: fixed; z-index: 90; width: 340px; max-width: 94vw; border-radius: 14px; overflow: hidden; background: rgba(10,14,19,.98); border: 1px solid rgba(68,235,225,.22); box-shadow: 0 18px 44px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .pk-tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .pk-tab { flex: 1; padding: 8px 4px; border: none; background: transparent; color: var(--ng-text3); font-size: 13px; font-weight: 600; border-radius: 8px 8px 0 0; cursor: pointer; } .pk-tab:hover { color: var(--ng-text2); } .pk-tab.is-active { color: #46ede2; background: rgba(68,235,225,.10); } .pk-pane { display: none; max-height: 300px; overflow-y: auto; padding: 10px 12px 12px; } .pk-pane.is-active { display: block; } .pk-search { width: 100%; margin-bottom: 8px; } .pk-grid { column-count: 2; column-gap: 6px; } .pk-item { position: relative; display: block; width: 100%; margin: 0 0 6px; break-inside: avoid; padding: 0; border: none; background: rgba(255,255,255,.04); border-radius: 8px; overflow: hidden; cursor: pointer; } .pk-item img { width: 100%; display: block; } .pk-item:hover { outline: 2px solid #46ede2; outline-offset: -2px; } .pk-status { text-align: center; color: var(--ng-text3); font-size: 12px; padding: 6px 0 2px; } .pk-subtabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; margin: -10px -12px 6px; padding: 10px 12px 6px; background: rgba(10,14,19,.98); } .pk-subtab { flex: 1 1 0; padding: 5px 4px; border: none; background: transparent; color: var(--ng-text3); font-size: 11.5px; font-weight: 600; border-radius: 7px; cursor: pointer; transition: background .12s ease, color .12s ease; } .pk-subtab:hover { color: var(--ng-text2); background: rgba(255,255,255,.06); } .pk-subtab.is-active { color: #06202b; background: #46ede2; } .pk-fav { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: #fff; background: rgba(8,14,22,.5); border-radius: 50%; opacity: .5; cursor: pointer; transition: opacity .12s ease, color .12s ease, transform .12s ease; } @media (max-width: 640px) { .pk-fav { width: 32px; height: 32px; font-size: 16px; opacity: .62; } } /* Стіна профілю */ .block--wall .block-body { display: flex; flex-direction: column; gap: 14px; } .wallCount { font-size: 12px; color: var(--ng-text3); background: rgba(255,255,255,.06); padding: 1px 8px; border-radius: 999px; vertical-align: middle; } .wallForm { display: flex; flex-direction: column; gap: 8px; } .wallForm-input { width: 100%; resize: vertical; min-height: 60px; } .wallForm .wallForm-input { padding: 10px 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.22); border-radius: var(--ng-rsm); color: var(--ng-text); font: inherit; line-height: 1.5; } .wallForm .wallForm-input:focus { border-color: rgba(70,237,226,.55); background: rgba(255,255,255,.05); box-shadow: 0 0 0 3px rgba(70,237,226,.12); } /* Стіна: помітна сіра рамка навколо поля вводу і у візуальному (rich) режимі */ .wallForm .editor-rich { border: 1px solid rgba(255,255,255,.22); border-radius: var(--ng-rsm); background: rgba(255,255,255,.035); min-height: 62px; padding: 10px 12px; } .wallForm .editor-rich:focus { border-color: rgba(70,237,226,.55); background: rgba(255,255,255,.05); box-shadow: 0 0 0 3px rgba(70,237,226,.12); } /* ── Віджет конкурсу [contest] (жива таблиця ТОП-10 запрошувачів у Discord) ── */ .contest-widget { margin: 14px 0; border: 1px solid rgba(70,237,226,.28); border-radius: var(--ng-rlg, 14px); background: linear-gradient(180deg, rgba(70,237,226,.06), rgba(255,255,255,.02)); overflow: hidden; } .contest-widget-loading { padding: 18px 14px; text-align: center; color: var(--ng-text3); font-size: 14px; } .contest-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(70,237,226,.08); } .contest-title { font-weight: 800; font-size: 15px; color: var(--ng-text); } .contest-sub { font-size: 12px; color: var(--ng-text3); } .contest-empty { padding: 20px 14px; text-align: center; color: var(--ng-text3); } .contest-scroll { overflow-x: auto; } .contest-table { width: 100%; border-collapse: collapse; font-size: 14px; } .contest-table th { text-align: left; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ng-text3); border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .contest-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; } .contest-table tr:last-child td { border-bottom: none; } .contest-table tr.is-part td { background: rgba(70,237,226,.05); } .contest-rank { width: 34px; color: var(--ng-text3); font-variant-numeric: tabular-nums; } .contest-name a { color: #46ede2; text-decoration: none; } .contest-name a:hover { text-decoration: underline; } .contest-count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .contest-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .contest-badge.is-in { background: rgba(70,237,226,.16); color: #7ff3ec; } .contest-badge.is-out { background: rgba(255,255,255,.06); color: var(--ng-text3); } .contest-foot { padding: 7px 14px; font-size: 11px; color: var(--ng-text3); border-top: 1px solid rgba(255,255,255,.06); text-align: right; } .wallForm .wallForm-input::placeholder { color: var(--ng-text3); opacity: 1; } .wallForm-actions { display: flex; align-items: center; gap: 4px; } .wallForm-send { margin-left: auto; } .wallForm-guest { color: var(--ng-text3); font-size: 14px; } .wallForm-guest a { color: #46ede2; } .wallList { display: flex; flex-direction: column; gap: 10px; } .wallItem { position: relative; display: flex; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.02); border: 1px solid var(--ng-line); border-radius: 10px; } .wallItem-ava .avatar, .wallItem .avatar { width: 40px; height: 40px; flex: 0 0 40px; } .wallItem-main { flex: 1 1 auto; min-width: 0; } .wallItem-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .wallItem-author { font-weight: 600; color: var(--ng-text); } .wallItem-author:hover { color: #46ede2; } .wallItem-date { font-size: 12px; color: var(--ng-text3); } .wallItem-body { color: var(--ng-text2); word-wrap: break-word; overflow-wrap: anywhere; } .wallItem-body img:not(.emoji) { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; margin-top: 4px; } .wallItem-del { position: absolute; top: 6px; right: 6px; margin: 0; } .wallItem-delBtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; color: var(--ng-text3); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; } .wallItem:hover .wallItem-delBtn { opacity: 1; } .wallItem-delBtn:hover { background: rgba(255,80,80,.14); color: #ff6b6b; } @media (max-width: 640px) { .wallItem-delBtn { opacity: .7; } } /* Дії над записом стіни (поскаржитися + видалити) — кластер угорі праворуч */ .wallItem-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; } .wallItem-actions form { position: static; margin: 0; } .wallItem-reportBtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; color: var(--ng-text3); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; } .wallItem:hover .wallItem-reportBtn, .wallReplyItem:hover .wallItem-reportBtn { opacity: 1; } .wallItem-reportBtn:hover { background: rgba(255,180,60,.16); color: #ffb43c; } @media (max-width: 640px) { .wallItem-reportBtn { opacity: .7; } } /* Відповіді на стіні (1 рівень) з міні-цитатою */ .wallReply { margin-top: 8px; } .wallReply-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ng-text3); cursor: pointer; list-style: none; user-select: none; padding: 2px 0; width: max-content; } .wallReply-toggle::-webkit-details-marker { display: none; } .wallReply-toggle:hover { color: #46ede2; } .wallReply[open] .wallReply-toggle { color: var(--ng-text2); margin-bottom: 6px; } .wallReplyForm { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .wallReplyForm-input { width: 100%; resize: vertical; min-height: 44px; padding: 8px 10px; background: rgba(255,255,255,.035); border: 1px solid var(--ng-line); border-radius: var(--ng-rsm); color: var(--ng-text); font: inherit; line-height: 1.5; } .wallReplyForm-input:focus { border-color: rgba(70,237,226,.55); background: rgba(255,255,255,.05); box-shadow: 0 0 0 3px rgba(70,237,226,.12); outline: none; } .wallReplyForm-input::placeholder { color: var(--ng-text3); opacity: 1; } .wallReplyForm .button { align-self: flex-start; } .wallReplies { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--ng-line); } .wallReplyItem { position: relative; display: flex; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.02); border: 1px solid var(--ng-line); border-radius: 8px; } .wallReplyItem .avatar.avatar--xs { width: 30px; height: 30px; flex: 0 0 30px; } .wallReplyItem .wallItem-main { flex: 1 1 auto; min-width: 0; } .wallQuote { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 6px; padding: 5px 10px; background: rgba(70,237,226,.05); border-left: 2px solid rgba(70,237,226,.5); border-radius: 0 6px 6px 0; font-size: 12px; } .wallQuote-author { font-weight: 600; color: #46ede2; } .wallQuote-text { color: var(--ng-text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wallReplyItem:hover .wallItem-delBtn { opacity: 1; } /* Історія правок допису */ .message-edited-log { color: var(--ng-text3); margin-left: 2px; white-space: nowrap; } .message-edited-log:hover { color: #46ede2; } .verList { display: flex; flex-direction: column; gap: 14px; } .verItem { border: 1px solid var(--ng-line); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.02); } .verItem--current { border-color: rgba(70,237,226,.4); background: rgba(70,237,226,.05); } .verItem-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ng-line); } .verItem-tag { font-weight: 700; font-size: 13px; color: var(--ng-text); } .verItem--current .verItem-tag { color: #46ede2; } .verItem-meta { font-size: 12px; color: var(--ng-text3); } .verItem-rb { margin-left: auto; } .verItem-body { color: var(--ng-text2); word-wrap: break-word; overflow-wrap: anywhere; } .verDiff { margin-top: 10px; border-top: 1px dashed var(--ng-line); padding-top: 8px; } .verDiff > summary { cursor: pointer; font-size: 12px; color: var(--ng-text3); user-select: none; } .verDiff > summary:hover { color: var(--ng-teal); } .verDiff-body { margin-top: 8px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12.5px; border-radius: 8px; overflow-x: auto; border: 1px solid var(--ng-line); } .verDiff-line { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; } .verDiff-sign { flex: none; width: 10px; opacity: .7; text-align: center; } .verDiff-line--add { background: rgba(120,220,120,.12); color: #b6f0b6; } .verDiff-line--del { background: rgba(255,90,90,.12); color: #ffb3b3; } .verDiff-none { margin-top: 8px; font-size: 12px; color: var(--ng-text3); } /* Активні сесії (керування пристроями) */ .sessList { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .sessItem { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--ng-line); border-radius: 10px; background: rgba(255,255,255,.02); } .sessItem--current { border-color: rgba(70,237,226,.4); background: rgba(70,237,226,.05); } .sessItem-main { flex: 1; min-width: 0; } .sessItem-dev { font-size: 14px; color: var(--ng-text); display: flex; align-items: center; gap: 6px; } .sessItem-badge { font-size: 11px; font-weight: 700; color: #46ede2; background: rgba(70,237,226,.12); padding: 1px 7px; border-radius: 6px; } .sessItem-meta { font-size: 12px; color: var(--ng-text3); margin-top: 2px; } .sessItem-rev { flex: none; } /* Кошик видалених тем + банер */ .trashRow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ng-line); } .trashRow:last-child { border-bottom: none; } .trashRow-main { flex: 1 1 auto; min-width: 0; } .trashRow-title { font-weight: 600; color: var(--ng-text); } .trashRow-title:hover { color: #46ede2; } .trashRow-meta { font-size: 12px; color: var(--ng-text3); margin-top: 3px; } .trashRow-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .trashRow-left { color: var(--ng-gold); white-space: nowrap; } .block--trash { margin-top: 16px; } .structItem--trash .structItem-title a { color: var(--ng-text2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); } .structItem--trash .structItem-title a:hover { color: #46ede2; } /* Видалена тема прямо в списку розділу (позначка для персоналу) */ .structItem.is-deleted { background: rgba(230,180,60,.05); } .structItem.is-deleted .structItem-icon { color: var(--ng-gold); opacity: .85; } .structItem.is-deleted .structItem-title > a { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); color: var(--ng-text2); } .structItem-delTag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ng-gold); background: rgba(230,180,60,.14); padding: 1px 8px; border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap; } .structItem-delInfo { color: var(--ng-gold); } .structItem-latest--trash { display: flex; align-items: center; justify-content: flex-end; } .block-filterBar--trash .block-filterBar-info { display: inline-flex; align-items: center; gap: 6px; color: var(--ng-gold); } .trashBanner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(230,180,60,.4); background: rgba(230,180,60,.08); border-radius: 10px; } .trashBanner-text { display: inline-flex; align-items: center; gap: 8px; color: var(--ng-gold); font-size: 13px; } .trashBanner-action { margin: 0; } @media (max-width: 560px) { .trashRow { flex-direction: column; align-items: flex-start; } .trashRow-side { width: 100%; justify-content: space-between; } } .pk-item:hover .pk-fav { opacity: 1; } .pk-fav:hover { color: #ff6b81; transform: scale(1.12); } .pk-fav.is-fav { opacity: 1; color: #ff4d6d; } .js-gifBtn { font-size: 10px; font-weight: 800; letter-spacing: .03em; } .emojiPanel-cat { font-size: 12px; color: var(--ng-text3); text-transform: uppercase; letter-spacing: .04em; margin: 10px 2px 4px; } .emojiPanel-cat:first-child { margin-top: 0; } .emojiPanel-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .emojiPanel-em { display: flex; align-items: center; justify-content: center; padding: 5px; border: none; background: transparent; border-radius: 8px; cursor: pointer; transition: background .12s; } .emojiPanel-em img { width: 24px; height: 24px; display: block; } .emojiPanel-em:hover { background: rgba(68,235,225,.14); } /* Попап палітри кольору / розміру тексту в редакторі */ .editorPop { position: fixed; z-index: 3000; background: rgba(10,14,19,.98); border: 1px solid rgba(68,235,225,.22); border-radius: 12px; padding: 9px; box-shadow: 0 14px 38px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .editorPop-colors { display: grid; grid-template-columns: repeat(7, 24px); gap: 6px; } .editorPop-sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; padding: 0; transition: transform .1s; } .editorPop-sw:hover { transform: scale(1.14); } .editorPop-custom { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: var(--ng-text2); cursor: pointer; } .editorPop-custom input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: transparent; cursor: pointer; margin-left: auto; } .editorPop--size { display: flex; flex-direction: column; gap: 1px; min-width: 172px; } .editorPop-size { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; background: transparent; color: var(--ng-text); border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; line-height: 1; } .editorPop-size:hover { background: rgba(68,235,225,.12); } .editorPop-size > span { min-width: 24px; text-align: center; font-weight: 700; } .editor-sizeGlyph { font-weight: 800; letter-spacing: -1px; } .editor-sizeGlyph small { font-size: .68em; } .editorPop--font { display: flex; flex-direction: column; gap: 1px; min-width: 200px; max-height: 340px; overflow-y: auto; } .editorPop-font { display: block; width: 100%; padding: 7px 12px; border: 0; background: transparent; color: var(--ng-text); border-radius: 8px; cursor: pointer; text-align: left; font-size: 16px; line-height: 1.2; white-space: nowrap; } .editorPop-font:hover { background: rgba(68,235,225,.12); } .editor-fontGlyph { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 15px; font-style: italic; } /* Емодзі Twemoji у тексті повідомлень */ img.emoji { width: 1.3em; height: 1.3em; margin: 0 .05em; vertical-align: -0.28em; } /* ============================================================ ВИДЕО (промо) ============================================================ */ .ng-featured-video { margin-bottom: 18px; border-radius: 16px; overflow: hidden; position: relative; border: 1px solid var(--glass-border2); box-shadow: var(--shadow-2); } .ng-featured-video-inner { position: relative; padding-top: 47%; background: #000; cursor: pointer; } .ng-featured-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ng-featured-video-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .ng-featured-video-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); } .ng-featured-video-inner:hover .ng-featured-video-play { transform: scale(1.08); } .ng-featured-video-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 18px 14px; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); pointer-events: none; } /* Компактные промо-превью (два в ряд, в блоке) */ .ng-videos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; } .ng-video { flex: 0 1 262px; max-width: 262px; border-radius: 14px; overflow: hidden; position: relative; border: 1px solid var(--glass-border2); box-shadow: var(--shadow-1); transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .ng-video:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .ng-video-inner { position: relative; padding-top: 56.25%; background: #000; cursor: pointer; } .ng-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ng-video-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .ng-video-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 31px; border: none; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); filter: drop-shadow(0 3px 9px rgba(0,0,0,.5)); } .ng-video-play svg { width: 100%; height: 100%; display: block; } .ng-video-inner:hover .ng-video-play { transform: scale(1.1); } .ng-video-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 8px; color: #fff; font-weight: 600; font-size: 12px; background: linear-gradient(to top, rgba(0,0,0,.82), transparent); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ СТАТИСТИКА ============================================================ */ .statGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .statCell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 8px; text-align: center; background: rgba(255,255,255,.03); border: 1px solid var(--ng-line); border-radius: var(--ng-rsm); color: var(--ng-text); transition: transform .2s var(--ease), background .2s var(--ease); } .statCell:hover { transform: translateY(-2px); background: rgba(255,255,255,.05); } .statCell-icon { color: var(--ng-teal); margin-bottom: 4px; } .statCell b { font-size: 22px; color: var(--ng-teal); line-height: 1.1; } .statCell span { font-size: 10px; color: var(--ng-text3); text-transform: uppercase; letter-spacing: .06em; } .statCell--user b { font-size: 14px; color: var(--ng-blue); } .statCell--user .avatar { margin-bottom: 4px; } /* ============================================================ САЙДБАР-ВИДЖЕТЫ ============================================================ */ .block--me { padding: 15px 16px 16px; } .meCard { display: flex; align-items: center; gap: 12px; } .meCard-main { flex: 1; min-width: 0; } .meCard-name { display: block; font-weight: 700; color: #e6f0fb; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meCard-role { display: block; font-size: 11px; color: var(--ng-text3); letter-spacing: .04em; margin-top: 2px; } .meCard-role .rankBadges { margin-top: 6px; } .meCard-bell { position: relative; flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ng-text2); transition: background .15s, color .15s; } .meCard-bell:hover { background: var(--glass-bg-soft); color: var(--ng-text); } .meCard-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--ng-red); color: #1a0808; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--ng-bg2); } .meCard-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .meCard-stats { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ng-line); display: flex; flex-direction: column; gap: 9px; } .meCard-stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.35; } .meCard-statK { color: var(--ng-text3); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; white-space: nowrap; flex: none; } .meCard-stats b { color: var(--ng-text); font-weight: 600; text-align: right; word-break: break-word; } .ng-quicklinks-body { display: flex; flex-direction: column; gap: 7px; } .ng-ql-btn { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--ng-rsm); font-size: 13px; font-weight: 600; color: var(--ng-text2); background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .ng-ql-btn:hover { transform: translateX(3px); color: #fff; border-color: var(--glass-border2); } .ng-ql-icon { display: inline-flex; opacity: .85; } .ng-ql-btn--telegram:hover { background: rgba(38,165,228,.14); color: #86d6f9; } .ng-ql-btn--discord:hover { background: rgba(88,101,242,.14); color: #aab2ff; } .ng-ql-btn--instagram:hover { background: rgba(225,48,108,.14); color: #f489b0; } .ng-ql-btn--rules:hover { background: rgba(255,177,90,.14); color: #ffc27e; } .ng-ql-btn--support:hover { background: rgba(87,217,155,.14); color: #83e6b6; } .ng-ql-btn--link:hover { background: var(--accent-soft); color: var(--ng-teal); } .ng-ql-btn--site:hover { background: rgba(68,235,225,.14); color: var(--ng-teal); } .ng-ql-btn--tiktok:hover { background: rgba(255,255,255,.10); color: #fff; } .ng-ql-btn--youtube:hover { background: rgba(255,0,0,.14); color: #ff8a8a; } .ng-ql-btn--twitch:hover { background: rgba(145,70,255,.16); color: #c4a5ff; } .staffRow { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .staffRow + .staffRow { border-top: 1px solid var(--ng-line); } .staffRow-name { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #e6f0fb; } .staffRow-badge { color: var(--ng-teal); } .staffRow-title { font-size: 11px; color: var(--ng-text3); } .staffRow:hover .staffRow-name { color: var(--ng-teal); } .onlineList { font-size: 12.5px; line-height: 1.9; margin: 0; } .onlineList-user { color: var(--ng-text2); } .onlineList-user.is-staff { color: var(--ng-gold); font-weight: 600; } .onlineList-user.is-leader { font-weight: 600; } .onlineList-user:hover { color: var(--ng-teal); } .onlineStat { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ng-line); font-size: 12px; color: var(--ng-text3); } .onlineStat b { color: var(--ng-text2); } .block-body--rows .latestRow { padding: 11px 14px; border-radius: 10px; } .latestRow { display: flex; gap: 10px; align-items: flex-start; transition: background .16s var(--ease); } .block-body--rows .latestRow + .latestRow { position: relative; } .block-body--rows .latestRow + .latestRow::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--ng-line); } .latestRow:hover { background: rgba(255,255,255,.03); } .latestRow-main { min-width: 0; } .latestRow-title { display: block; font-size: 12.5px; color: #dbe8f6; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .latestRow:hover .latestRow-title { color: var(--ng-teal); } .latestRow-meta { font-size: 11px; color: var(--ng-text3); margin-top: 2px; } /* ============================================================ АВАТАРЫ ============================================================ */ .avatar { border-radius: 14px; object-fit: cover; background: var(--glass-bg-strong); box-shadow: 0 3px 12px rgba(0,0,0,.4); position: relative; flex-shrink: 0; } .avatar--s { width: 32px; height: 32px; border-radius: 10px; } .avatar--m { width: 46px; height: 46px; } .avatar--l { width: 76px; height: 76px; border: 2px solid rgba(255,255,255,.12); } .avatar--xl { width: 100px; height: 100px; border-radius: 22px; border: 2px solid rgba(255,255,255,.14); } .avatar.is-staff { border-color: rgba(255,207,118,.42); box-shadow: 0 0 18px rgba(255,207,118,.16); } .avatar.is-online::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ng-green); border: 2px solid #0d1420; box-shadow: 0 0 8px rgba(87,217,155,.7); } .username--staff { color: var(--ng-gold) !important; } /* ============================================================ КНОПКИ ============================================================ */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border-radius: var(--ng-rsm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ng-text); background: var(--glass-bg-soft); border: 1px solid var(--glass-border2); box-shadow: inset 0 1px 0 var(--glass-hi); transition: transform .16s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); } .button:hover { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); transform: translateY(-1px); } .button:active { transform: translateY(0) scale(.985); } .button:disabled, .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 var(--glass-hi); } .button:disabled:hover, .button[disabled]:hover { transform: none; background: var(--glass-bg-soft); border-color: var(--glass-border2); color: var(--ng-text); } .button--primary { color: #eafffd; background: linear-gradient(180deg, rgba(68,235,225,.26), rgba(68,235,225,.13)); border: 1px solid rgba(68,235,225,.5); box-shadow: 0 6px 20px rgba(68,235,225,.16), inset 0 1px 0 rgba(255,255,255,.18); } .button--primary:hover { color: #fff; background: linear-gradient(180deg, rgba(68,235,225,.36), rgba(68,235,225,.2)); border-color: rgba(68,235,225,.7); box-shadow: 0 8px 26px rgba(68,235,225,.28), inset 0 1px 0 rgba(255,255,255,.22); } .button--cta { color: #2a1b06; background: linear-gradient(180deg, #ffd58a, #ffb15a); border: 1px solid rgba(255,177,90,.6); box-shadow: 0 6px 20px rgba(255,177,90,.22), inset 0 1px 0 rgba(255,255,255,.35); } .button--cta:hover { color: #241703; background: linear-gradient(180deg, #ffe0a0, #ffbc6e); box-shadow: 0 8px 26px rgba(255,177,90,.34); } .button--danger { color: #ffb0b0; background: rgba(255,111,111,.08); border-color: rgba(255,111,111,.3); } .button--danger:hover { background: rgba(255,111,111,.16); color: #fff; border-color: rgba(255,111,111,.5); } .button--full { width: 100%; } .button--lg { padding: 13px 24px; font-size: 14px; border-radius: 14px; } .button--small { padding: 7px 12px; font-size: 12px; border-radius: 10px; } /* ============================================================ ФОРМЫ / ПОЛЯ ============================================================ */ .input { width: 100%; padding: 11px 14px; border-radius: var(--ng-rsm); font-family: inherit; font-size: 14px; color: var(--ng-text); background: rgba(255,255,255,.04); border: 1px solid var(--glass-border2); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .input::placeholder { color: var(--ng-text3); } .input:focus { outline: none; background: rgba(255,255,255,.06); border-color: var(--accent-ring); box-shadow: 0 0 0 4px var(--accent-soft); } .input--small { width: auto; padding: 7px 11px; font-size: 12px; } select.input { cursor: pointer; } textarea.input { resize: vertical; min-height: 96px; line-height: 1.65; } /* Нативний попап