/* ════════════════════════════════════════════════════════════════════ Nexus Skins v1.29.13 — три варианта оформления интерфейса. Применяются через [data-skin="..."] на : • classic — текущее оформление (overrides не применяются) • cyberpunk — неон, пурпур + циан, хроматическая аберрация • hacker — зелёный терминал на чёрном, моноширинный шрифт Skins ортогональны темам: можно cyberpunk + light/dark, hacker + dark и т.д. Но cyberpunk и hacker рассчитаны прежде всего на тёмный фон. ════════════════════════════════════════════════════════════════════ */ /* ┌──────────────────────────────────────────────────────────────────┐ │ CYBERPUNK 2077-style │ │ Неоновый розово-голубой контраст. Глитч на акцентных элементах. │ └──────────────────────────────────────────────────────────────────┘ */ [data-skin="cyberpunk"] { --accent: #ff006e; --accent-dim: rgba(255, 0, 110, 0.35); --accent-soft: rgba(255, 0, 110, 0.12); --accent-rgb: 255, 0, 110; /* Фон с лёгким холодным градиентом */ --bg-base: #0a0a14; --bg-deep: #050510; --bg-secondary: #12122a; --bg-overlay: rgba(0, 245, 255, 0.06); --bg-raised: #1a1a3e; --bg-elevated: #20204a; --text-primary: #e0e0ff; --text-secondary: #b8b8e8; --text-muted: #7878a8; --border: rgba(0, 245, 255, 0.18); --border-strong: rgba(0, 245, 255, 0.35); --green: #00ff88; --red: #ff006e; --orange: #ffa500; --blue: #00f5ff; } /* Светлый cyberpunk — на случай если кто-то выберет light тему */ [data-skin="cyberpunk"][data-theme="light"] { --bg-base: #f5f0ff; --bg-deep: #ebe0ff; --bg-secondary: #fff; --bg-overlay: rgba(255, 0, 110, 0.06); --bg-raised: #fff; --bg-elevated: #faf5ff; --text-primary: #1a0028; --text-secondary: #4a0050; --text-muted: #7a3a90; --border: rgba(255, 0, 110, 0.2); --border-strong: rgba(255, 0, 110, 0.35); } /* Заголовок-логотип Nexus в стиле "хром" с неоновой подсветкой */ [data-skin="cyberpunk"] .sidebar-logo-text { color: var(--blue, #00f5ff); text-shadow: 0 0 4px rgba(0, 245, 255, 0.7), 2px 0 0 rgba(255, 0, 110, 0.55); letter-spacing: 4px; font-weight: 800; } /* Сообщения исходящие (мои) — неоновая лента */ [data-skin="cyberpunk"] .message.own .message-bubble, [data-skin="cyberpunk"] .message-own .message-bubble, [data-skin="cyberpunk"] .msg-bubble.own { background: linear-gradient(135deg, #ff006e 0%, #b300ff 100%); color: #fff; box-shadow: 0 0 12px rgba(255, 0, 110, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 0, 110, 0.6); } /* Сообщения входящие — обведение цианом */ [data-skin="cyberpunk"] .message:not(.own) .message-bubble, [data-skin="cyberpunk"] .msg-bubble:not(.own) { background: rgba(20, 20, 50, 0.85); border: 1px solid rgba(0, 245, 255, 0.25); box-shadow: 0 0 8px rgba(0, 245, 255, 0.08); } /* Кнопки — толще, со свечением при hover */ [data-skin="cyberpunk"] .btn-primary, [data-skin="cyberpunk"] #send-btn { background: linear-gradient(135deg, #ff006e, #b300ff) !important; border: 1px solid #ff006e !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; box-shadow: 0 0 12px rgba(255, 0, 110, 0.4) !important; } [data-skin="cyberpunk"] .btn-primary:hover, [data-skin="cyberpunk"] #send-btn:hover { box-shadow: 0 0 20px rgba(255, 0, 110, 0.7) !important; } /* Поле ввода */ [data-skin="cyberpunk"] #message-input, [data-skin="cyberpunk"] input[type="text"], [data-skin="cyberpunk"] input[type="password"], [data-skin="cyberpunk"] input[type="email"], [data-skin="cyberpunk"] textarea { background: rgba(10, 10, 30, 0.6); border: 1px solid rgba(0, 245, 255, 0.3); color: var(--text-primary); } [data-skin="cyberpunk"] #message-input:focus, [data-skin="cyberpunk"] input:focus, [data-skin="cyberpunk"] textarea:focus { border-color: #00f5ff; box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.2); outline: none; } /* Активный чат в списке — неоновая полоска слева */ [data-skin="cyberpunk"] .chat-item.active { background: linear-gradient(90deg, rgba(255, 0, 110, 0.14) 0%, transparent 100%); border-left: 2px solid #ff006e; box-shadow: inset 0 0 12px rgba(255, 0, 110, 0.06); } /* Story rings в киберпанке */ [data-skin="cyberpunk"] .story-item.has-new .story-ring { background: conic-gradient(from 200deg, #ff006e 0deg, #b300ff 120deg, #00f5ff 240deg, #ff006e 360deg); box-shadow: 0 0 8px rgba(255, 0, 110, 0.4); } /* Тонкая сканлайн анимация на body — едва заметная */ [data-skin="cyberpunk"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 245, 255, 0) 0px, rgba(0, 245, 255, 0) 2px, rgba(0, 245, 255, 0.018) 3px, rgba(0, 245, 255, 0) 4px ); z-index: 9999; mix-blend-mode: screen; } /* Скроллбары */ [data-skin="cyberpunk"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff006e, #b300ff); border-radius: 4px; } [data-skin="cyberpunk"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff3088, #c020ff); } /* ┌──────────────────────────────────────────────────────────────────┐ │ HACKER — зелёный терминал на чёрном │ │ Моноширинный шрифт, минимум хрома, эстетика CRT │ └──────────────────────────────────────────────────────────────────┘ */ [data-skin="hacker"] { --accent: #00ff41; --accent-dim: rgba(0, 255, 65, 0.3); --accent-soft: rgba(0, 255, 65, 0.1); --accent-rgb: 0, 255, 65; --bg-base: #000000; --bg-deep: #000000; --bg-secondary: #0a0a0a; --bg-overlay: rgba(0, 255, 65, 0.05); --bg-raised: #0d0d0d; --bg-elevated: #141414; --text-primary: #00ff41; --text-secondary: #00cc33; --text-muted: #008822; --border: rgba(0, 255, 65, 0.18); --border-strong: rgba(0, 255, 65, 0.4); --green: #00ff41; --red: #ff4444; --orange: #ffaa00; --blue: #00ddff; /* v1.29.13 — переопределяем CSS-переменные шрифтов чтобы все элементы которые читают var(--font-sans) автоматически получили моноширинный шрифт. */ --font-sans: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Menlo', monospace; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Menlo', monospace; /* Дополнительно — прямой font-family для самого html */ font-family: var(--font-sans) !important; } /* Применяем моно к всем элементам */ [data-skin="hacker"] body, [data-skin="hacker"] input, [data-skin="hacker"] textarea, [data-skin="hacker"] button, [data-skin="hacker"] .message-bubble, [data-skin="hacker"] .chat-item-name, [data-skin="hacker"] .chat-header-info { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Menlo', monospace !important; } /* Логотип терминал-стиля с курсором */ [data-skin="hacker"] .sidebar-logo-text { color: #00ff41; text-shadow: 0 0 6px rgba(0, 255, 65, 0.6); letter-spacing: 3px; font-weight: 700; } [data-skin="hacker"] .sidebar-logo-text::after { content: '_'; animation: hacker-cursor 1s infinite; margin-left: 4px; color: #00ff41; } @keyframes hacker-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Сообщения — рамка вместо bubble */ [data-skin="hacker"] .message.own .message-bubble, [data-skin="hacker"] .message-own .message-bubble, [data-skin="hacker"] .msg-bubble.own { background: rgba(0, 255, 65, 0.08); border: 1px solid #00ff41; color: #00ff41; border-radius: 4px; box-shadow: inset 0 0 4px rgba(0, 255, 65, 0.1); } [data-skin="hacker"] .message:not(.own) .message-bubble, [data-skin="hacker"] .msg-bubble:not(.own) { background: rgba(0, 255, 65, 0.03); border: 1px solid rgba(0, 255, 65, 0.3); color: #00cc33; border-radius: 4px; } /* Префикс > перед именем отправителя как в shell */ [data-skin="hacker"] .message-author::before, [data-skin="hacker"] .msg-author::before { content: '> '; color: #008822; } /* Кнопки — терминальная рамка, без gradient'ов */ [data-skin="hacker"] .btn-primary, [data-skin="hacker"] #send-btn { background: transparent !important; border: 1px solid #00ff41 !important; color: #00ff41 !important; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; border-radius: 2px !important; box-shadow: none !important; } [data-skin="hacker"] .btn-primary:hover, [data-skin="hacker"] #send-btn:hover { background: rgba(0, 255, 65, 0.1) !important; box-shadow: 0 0 12px rgba(0, 255, 65, 0.4) !important; } [data-skin="hacker"] #send-btn svg { color: #00ff41 !important; } /* Поле ввода */ [data-skin="hacker"] #message-input, [data-skin="hacker"] input[type="text"], [data-skin="hacker"] input[type="password"], [data-skin="hacker"] input[type="email"], [data-skin="hacker"] textarea { background: rgba(0, 0, 0, 0.6); border: 1px solid #008822; color: #00ff41; border-radius: 2px; } [data-skin="hacker"] #message-input:focus, [data-skin="hacker"] input:focus, [data-skin="hacker"] textarea:focus { border-color: #00ff41; box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.3); outline: none; } /* Caret blink в поле ввода */ [data-skin="hacker"] textarea, [data-skin="hacker"] input { caret-color: #00ff41; } /* Search box — префикс $ */ [data-skin="hacker"] .search-box { border: 1px solid #008822; border-radius: 2px; background: rgba(0, 0, 0, 0.5); } /* Активный чат — обратное (inverse) выделение */ [data-skin="hacker"] .chat-item.active { background: rgba(0, 255, 65, 0.1); border-left: 3px solid #00ff41; box-shadow: inset 0 0 8px rgba(0, 255, 65, 0.05); } [data-skin="hacker"] .chat-item.active .chat-item-name { color: #00ff41; text-shadow: 0 0 4px rgba(0, 255, 65, 0.5); } /* Story rings — все зелёные */ [data-skin="hacker"] .story-item.has-new .story-ring { background: #00ff41; box-shadow: 0 0 8px rgba(0, 255, 65, 0.5); } [data-skin="hacker"] .story-item.viewed .story-ring { background: rgba(0, 255, 65, 0.25); } [data-skin="hacker"] .story-item.my-add .story-ring { border: 2px dashed #00ff41; } /* Аватары — без ярких цветов, монохромная зелёная индикация */ [data-skin="hacker"] .avatar, [data-skin="hacker"] .story-avatar, [data-skin="hacker"] .nx-lan-peer-avatar { background: rgba(0, 255, 65, 0.15) !important; color: #00ff41 !important; border: 1px solid rgba(0, 255, 65, 0.4) !important; text-shadow: 0 0 3px rgba(0, 255, 65, 0.5); } /* CRT scanline эффект */ [data-skin="hacker"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 255, 65, 0) 0px, rgba(0, 255, 65, 0) 2px, rgba(0, 255, 65, 0.025) 3px, rgba(0, 255, 65, 0) 4px ); z-index: 9999; mix-blend-mode: screen; } /* Винтажное мерцание */ [data-skin="hacker"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%); z-index: 9998; } /* Скроллбары — терминальные */ [data-skin="hacker"] ::-webkit-scrollbar { width: 8px; background: #000; } [data-skin="hacker"] ::-webkit-scrollbar-thumb { background: #008822; border-radius: 0; } [data-skin="hacker"] ::-webkit-scrollbar-thumb:hover { background: #00ff41; } /* Время сообщений */ [data-skin="hacker"] .message-time, [data-skin="hacker"] .msg-time { color: #008822 !important; font-size: 10px; opacity: 0.85; } [data-skin="hacker"] .message-time::before, [data-skin="hacker"] .msg-time::before { content: '['; } [data-skin="hacker"] .message-time::after, [data-skin="hacker"] .msg-time::after { content: ']'; } /* ┌──────────────────────────────────────────────────────────────────┐ │ CLASSIC — дефолт, никаких overrides │ │ Стиль читается напрямую из main.css / chat-ui.css │ └──────────────────────────────────────────────────────────────────┘ */ /* (нет правил — это базовый стиль) */ /* ════════════════════════════════════════════════════════════════ v1.29.14 — Расширенное покрытие skin для основного UI чатов Гарантирует что Кибер-панк / Хакер влияют не только на сообщения но и на header, sidebar, composer, modals. ════════════════════════════════════════════════════════════════ */ /* === CYBERPUNK — header / sidebar / composer глобально === */ [data-skin="cyberpunk"] .sidebar, [data-skin="cyberpunk"] .chat-header, [data-skin="cyberpunk"] .composer, [data-skin="cyberpunk"] .chat-input-bar { background: linear-gradient(180deg, #0a0a14 0%, #050510 100%); border-color: var(--border); } [data-skin="cyberpunk"] .chat-list-item:hover, [data-skin="cyberpunk"] .chat-item:hover { background: rgba(255, 0, 110, 0.06); } [data-skin="cyberpunk"] .chat-item-time, [data-skin="cyberpunk"] .chat-item-preview { color: var(--text-muted); } [data-skin="cyberpunk"] .chat-item-name { color: var(--text-primary); text-shadow: 0 0 6px rgba(0, 245, 255, 0.18); } [data-skin="cyberpunk"] .modal, [data-skin="cyberpunk"] .modal-overlay > div { background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: 0 0 20px rgba(255, 0, 110, 0.18); } [data-skin="cyberpunk"] .badge, [data-skin="cyberpunk"] .unread-count { background: linear-gradient(135deg, #ff006e, #b300ff); color: #fff; } [data-skin="cyberpunk"] .icon-btn:hover, [data-skin="cyberpunk"] .header-btn:hover { background: rgba(0, 245, 255, 0.1); box-shadow: 0 0 8px rgba(0, 245, 255, 0.25); } /* === HACKER — header / sidebar / composer глобально === */ [data-skin="hacker"] .sidebar, [data-skin="hacker"] .chat-header, [data-skin="hacker"] .composer, [data-skin="hacker"] .chat-input-bar { background: #000; border-color: var(--border); } [data-skin="hacker"] .chat-item:hover, [data-skin="hacker"] .chat-list-item:hover { background: rgba(0, 255, 65, 0.06); } [data-skin="hacker"] .chat-item-time, [data-skin="hacker"] .chat-item-preview { color: var(--text-muted); } [data-skin="hacker"] .modal, [data-skin="hacker"] .modal-overlay > div { background: #000; border: 1px solid var(--border); box-shadow: 0 0 14px rgba(0, 255, 65, 0.2); } [data-skin="hacker"] .badge, [data-skin="hacker"] .unread-count { background: var(--accent); color: #000; font-weight: 700; } [data-skin="hacker"] .icon-btn:hover, [data-skin="hacker"] .header-btn:hover { background: rgba(0, 255, 65, 0.1); box-shadow: 0 0 6px rgba(0, 255, 65, 0.3); } [data-skin="hacker"] .btn-primary, [data-skin="hacker"] #send-btn { background: var(--accent); color: #000; font-weight: 700; border: 1px solid var(--accent); } [data-skin="hacker"] .btn-primary:hover, [data-skin="hacker"] #send-btn:hover { background: #00cc33; box-shadow: 0 0 12px rgba(0, 255, 65, 0.4); } [data-skin="hacker"] .message.own .message-bubble, [data-skin="hacker"] .msg-bubble.own { background: rgba(0, 255, 65, 0.12); color: var(--accent); border: 1px solid var(--accent); } [data-skin="hacker"] .message:not(.own) .message-bubble, [data-skin="hacker"] .msg-bubble:not(.own) { background: rgba(0, 255, 65, 0.04); color: var(--accent); border: 1px solid rgba(0, 255, 65, 0.2); } /* Эффект CRT-сканлайн на хакере */ [data-skin="hacker"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 255, 65, 0.025) 3px, rgba(0, 0, 0, 0) 4px ); z-index: 9999; mix-blend-mode: screen; } /* ┌──────────────────────────────────────────────────────────────────┐ │ CORPORATE — сдержанный бизнес-стиль │ │ Тёмно-синий акцент, нейтральные серые тона, чистая типографика. │ │ Без анимаций glow / glitch. Высокая читаемость на мониторах. │ └──────────────────────────────────────────────────────────────────┘ */ [data-skin="corporate"] { /* Спокойный корпоративный синий (IBM Blue) */ --accent: #0f62fe; --accent-dim: rgba(15, 98, 254, 0.18); --accent-soft: rgba(15, 98, 254, 0.08); --accent-rgb: 15, 98, 254; /* Тёмно-серая глубокая палитра без оттенков (нейтральная) */ --bg-base: #161616; --bg-deep: #0d0d0d; --bg-secondary: #1f1f1f; --bg-overlay: rgba(244, 244, 244, 0.04); --bg-raised: #262626; --bg-elevated: #303030; --text-primary: #f4f4f4; --text-secondary: #c6c6c6; --text-muted: #8d8d8d; --border: rgba(244, 244, 244, 0.12); --border-strong: rgba(244, 244, 244, 0.24); --green: #24a148; --red: #da1e28; --orange: #f1c21b; --blue: #0f62fe; } /* Светлый Corporate — для дневной работы в офисе */ [data-skin="corporate"][data-theme="light"] { --accent: #0f62fe; --accent-dim: rgba(15, 98, 254, 0.14); --accent-soft: rgba(15, 98, 254, 0.06); --bg-base: #ffffff; --bg-deep: #f4f4f4; --bg-secondary: #f8f8f8; --bg-overlay: rgba(15, 22, 30, 0.03); --bg-raised: #ffffff; --bg-elevated: #f4f4f4; --text-primary: #161616; --text-secondary: #525252; --text-muted: #6f6f6f; --border: #e0e0e0; --border-strong: #c6c6c6; } /* Типографика: системный sans-serif, лёгкое расширение для оф. документов */ [data-skin="corporate"] body, [data-skin="corporate"] input, [data-skin="corporate"] textarea, [data-skin="corporate"] button { font-family: 'IBM Plex Sans', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0; font-feature-settings: 'tnum' 1; } /* Чуть строже шрифт логотипа — узкий semi-bold вместо моноширинного */ [data-skin="corporate"] .logo-text, [data-skin="corporate"] .sidebar-logo-text { font-family: 'IBM Plex Sans', system-ui, sans-serif !important; letter-spacing: 2px; font-weight: 600; } /* Без анимаций glow на акцентных элементах (по сравнению с cyber/hacker) */ [data-skin="corporate"] .msg-bubble.own, [data-skin="corporate"] .btn-primary, [data-skin="corporate"] .admin-btn.primary { box-shadow: none; } /* Слегка более квадратные углы — корпоративная строгость */ [data-skin="corporate"] .msg-bubble { border-radius: 6px; } [data-skin="corporate"] .chat-item { border-radius: 4px; } [data-skin="corporate"] .admin-input, [data-skin="corporate"] .btn-primary, [data-skin="corporate"] .admin-btn { border-radius: 4px; } /* Активный чат — тонкая левая полоса акцентом (вместо подсветки фона) */ [data-skin="corporate"] .chat-item.active { background: var(--bg-elevated); border-left: 3px solid var(--accent); padding-left: 9px; } /* Sidebar чуть строже */ [data-skin="corporate"] .sidebar { background: var(--bg-deep); border-right: 1px solid var(--border); }