/* ════════════════════════════════════════════════════════════════════ 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; /* Моноширинный шрифт везде */ font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Menlo', monospace !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 │ └──────────────────────────────────────────────────────────────────┘ */ /* (нет правил — это базовый стиль) */